Topic: Which modules to load

Declan Ward priority asked 2 years ago


According to changelog for ng-uikit-pro-standard I have version 12.0.0

I am trying to specify only the modules I use to load rather than the complete package.

With this in app.modules.ts the module loads and works as expected:

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDB_DATE_OPTIONS } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

imports: [
    MDBBootstrapModulesPro.forRoot()
]

If I then try to load only the modules used in app.modules.ts as follows:

 import { 
      AccordionModule, 
      ButtonsModule,
      CheckboxModule,
      DatepickerModule,
      IconsModule,
      InputsModule,
      InputUtilitiesModule,
      ModalModule,
      SelectModule,
      TableModule,  
      MDBSpinningPreloader,  
      MDB_DATE_OPTIONS,  
} from 'ng-uikit-pro-standard';

    imports: [
    // MDBootstrap Modules
    AccordionModule,
    ButtonsModule,
    CheckboxModule,
    DatepickerModule,
    IconsModule,
    InputsModule.forRoot(),
    InputUtilitiesModule,

    ModalModule.forRoot(),
    SelectModule,
    TableModule
]

I now get a compilation error :

Error: src/app/components/member-list/member-list.component.html:71:23 - 
error NG8002: Can't bind to 'outline' since it isn't a known property of 'mdb-select-2'.

I found that adding MdbTablePaginationComponent (I don't know why) results in a clean compile but a runtime error in the browser connsole:

Uncaught Error: The NgModule 'AppModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

JIT compilation is discouraged for production use-cases! Consider using AOT mode instead. Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server', or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.

Expected behavior Clean compile and module works

Actual behavior See error above.

package.json

{
  "name": "member-management",
  "version": "01.00.12",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/cdk": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/google-maps": "^12.2.5",
    "@angular/http": "^7.2.16",
    "@angular/material": "^12.2.5",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "@ckeditor/ckeditor5-angular": "^2.0.2",
    "@ckeditor/ckeditor5-build-classic": "^29.2.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@google/markerclusterer": "^2.0.9",
    "animate.css": "^4.1.1",
    "lodash": "^4.17.21",
    "ng-uikit-pro-standard": "git+https://oauth2:XXX---XXX@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "ngx-sortable": "^1.0.3",
    "rxjs": "^6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.5",
    "@angular/cli": "^12.2.5",
    "@angular/compiler-cli": "^12.2.5",
    "@angular/language-service": "^12.2.5",
    "@types/jasmine": "~3.6.0",
    "@types/lodash": "^4.14.172",
    "@types/node": "^12.20.24",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "tslint": "~6.1.0",
    "typescript": "~4.2.4"
  }
}

I guess I am missing a module but cannot figure out what. Can you suggest what I may be missing?


Arkadiusz Idzikowski staff commented 2 years ago

@declan.ward You are using new version of the select component (mdb-select-2). In this case you need to replace SelectModule with MdbSelectModule.

How can we reproduce the problem with table pagination? Does this error occur when you add the component selector to the HTML or when you import MdbTablePaginationComponent to your TS file? Does it happen in dev mode (ng serve) or when you try to build app (ng build/ng build --prod)?


Declan Ward priority commented 2 years ago

@Arkadiusz Idzikowski Thank you, that solves my problem. I had been working from the list at https://mdbootstrap.com/docs/angular/getting-started/modules/ but this doesn't mention MdbSelectModule (yet ;))

In answer to your question; I have created a new app to try and replicate the problem I described above with MdbTablePagination. It works as expected suggesting my original app had another issue.



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: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: Windows
  • Browser: Any
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No