Topic: Error in every mdb component
vittimendes free asked 4 years ago
After updating the project to angular 9 and the version of ng-uikit-pro-standard to the latest available I get the following error for every single mdb component that I am using in the whole project:
error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'mdb-date-picker'. 1. If 'mdb-date-picker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'mdb-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
I have followed the guides to migration, I even deleted my whole node_modules folder and installed everything again. I have tried to single import the components modules instead of importing the whole MDBBootstrapModulesPro.forRoot() on the app.module. I am using the git with token mode to download mdb-pro.
Here is my app.module.ts:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, LOCALE_ID, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtInterceptor} from '@/_helpers/jwt.interceptor'; import { ErrorInterceptor} from '@/_helpers/error.interceptor';
import { MDBBootstrapModulesPro} from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; import { FooterComponent } from './footer/footer.component'; import { NavbarComponent } from './navbar/navbar.component'; import { UserProfileComponent } from './user-profile/user-profile.component';
import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CountdownModule } from 'ngx-countdown'; import ptBr from '@angular/common/locales/pt'; import { registerLocaleData } from '@angular/common'; import { EntryModalComponent } from './entry-modal/entry-modal.component'; import { PoolViewModalComponent } from './pool-view-modal/pool-view-modal.component'; import { AlertSuccessComponent } from './alert-success/alert-success.component'; import { ErrorAlertComponent } from './error-alert/error-alert.component'; import { AdminComponent } from './admin/admin.component'; import { AuthenticationService } from './_services/authentication.service'; import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner'; import { DepositComponent } from './deposit/deposit.component'; import { FilterPipe } from './_pipes/filter.pipe';
registerLocaleData(ptBr)
@NgModule({
declarations: [
AppComponent,
LoginComponent,
HomeComponent,
FooterComponent,
NavbarComponent,
EntryModalComponent,
AlertSuccessComponent,
ErrorAlertComponent,
AdminComponent,
UserProfileComponent,
PoolViewModalComponent,
DepositComponent,
FilterPipe
],
imports:
BrowserModule,
AppRoutingModule,
Ng4LoadingSpinnerModule.forRoot(),
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
CountdownModule,
MDBBootstrapModulesPro.forRoot()
,
entryComponents: [EntryModalComponent, PoolViewModalComponent],
providers: [MDBSpinningPreloader, { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, { provide: LOCALE_ID, useValue: 'pt-BR' }],
schemas: [ NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA ],
bootstrap: [AppComponent]
})
export class AppModule { }
and here is my dependencies, (I am gonna hide the git token for obvious reasons)
"dependencies": { "@angular/animations": "~9.1.12", "@angular/cdk": "^10.1.2", "@angular/common": "~9.1.12", "@angular/compiler": "~9.1.12", "@angular/core": "~9.1.12", "@angular/forms": "~9.1.12", "@angular/platform-browser": "~9.1.12", "@angular/platform-browser-dynamic": "~9.1.12", "@angular/router": "~9.1.12", "@fortawesome/fontawesome-free": "^5.10.2", "@types/chart.js": "^2.8.5", "@types/dinero.js": "^1.4.1", "animate.css": "^3.7.2", "chart.js": "^2.5.0", "dinero": "^1.0.1", "dinero.js": "^1.6.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "ng-uikit-pro-standard": "git+https://oauth2:mytokenishere@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git", "ng4-loading-spinner": "^1.2.3", "ngx-countdown": "^8.0.1", "rxjs": "~6.6.2", "screenfull": "^3.3.0", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "^0.1000.5", "@angular/cli": "~9.1.12", "@angular/compiler-cli": "~9.1.12", "@angular/language-service": "~9.1.12", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.8.3" }
I have no idea how to sort this problem. Can someone please point out where have I missed something?
Regards,
Fabio
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: PC
- Browser: chrome
- OS: Linux
- Provided sample code: No
- Provided link: Yes
vittimendes free commented 4 years ago
I have found the problem. I was using a 3rd party library Ng4LoadingSpinnerModule that wasnt compatible with angular 9, I havent payed attention on the messages when I migrate the angular version from 8 to 9. Since that library was being imported before the mdb components on app.module.ts it was causing an error and the mdb components werent being imported. I have fixed this removing that library from my project.