Topic: Error in every mdb component

vittimendes free asked 3 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


vittimendes free commented 3 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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