lazy loading a module

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: lazy loading a module

FJReemer asked 6 years ago

When using lazy loading I get a compile time error: Error: No module factory available for dependency type: ContextElementDependency Basically I have taken this example https://angular.io/guide/lazy-loading-ngmodules and used that as a basis for an app that should use my UserManagement module (from Angular 4, before I had MDBootstrap). Steps I took:
  1. unpacked the zip to get the Angular/MDbootstrap starting point (ng-uikit-pro-standard-6.2.0)
  2. I added ng g m modules/usermanagement --routing (same as angular.io example)
  3. in app folder I added app-routing.module.ts (same as angular.io example)
  4. checked and double checked everything to ensure it is equal to angular.io example
Complete error: 
40% building modules 2/2 modules 0 active× ｢wdm｣: Error: No module factory available for dependency type: ContextElementDependency
at addDependency (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:407:12)
at iterationOfArrayCallback (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:88:3)
at addDependenciesBlock (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:423:5)
at iterationOfArrayCallback (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:88:3)
at addDependenciesBlock (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:426:5)
at Compilation.processModuleDependencies (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:434:4)
at afterBuild (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:556:15)
at buildModule.err (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:600:11)
at callback (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:358:35)
at module.build.error (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:394:12)
at resolveDependencies (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibContextModule.js:233:4)
at ContextModule.result.resolveDependencies (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@ngtoolswebpacksrcangular_compiler_plugin.js:476:25)
at ContextModule.build (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibContextModule.js:158:8)
at Compilation.buildModule (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:362:10)
at factory.create (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_moduleswebpacklibCompilation.js:583:14)
at hooks.afterResolve.callAsync (S:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modules@angular-devkitbuild-angularnode_modulesw 40% building modules 2/3 modules 1 active …codefluxsrcappapp-routing.module.tsS:DEVELOPMENTVSCODETRUNKAngularcodefluxnode_modulesneo-asyncasync.js:14
throw new Error('Callback was already called.');
Did I miss something? Or need this to be done differently because of MDBootstrap? Thnx in advc.  

Damian Gemza staff commented 6 years ago

Dear FJReemer, We'll investigate this problem. Could you please check if your case exists while using not the MDB Angular zip but installing MDB Angular as a dependency from our Gitlab server? Please check our 5min-quickstart guide to generate the new project and implement into it the MDB Angular library. Then please try to add Lazy Loading, and check if the problem still exists. LINK: https://mdbootstrap.com/angular/5min-quickstart/ Best Regards, Damian

Arkadiusz Idzikowski staff answered 6 years ago

Dear FJReemer, It looks like this problem is caused by using different webpack version than the one that angular-cli depends on (https://github.com/angular/angular-cli/issues/6417#issue). Please remove webpack from your package.json, delete node modules and package-lock.json and run npm install again. Best, Arek

FJReemer answered 6 years ago

This is so true. Thnx. If you use MDBootstrap Angular 6.x.x it will work in an Angular 5.2.0 environment - doing the simple things! It will complain while compiling when you do the good stuff, like lazy loading! The solution is to update all components to the latest versions.
Write
Create snippet
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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
FJReemer
27Support score
2Questions 2Answers
0Snippets likes 2Snippets