Topic: lazy loading a module
FJReemer free 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:
- unpacked the zip to get the Angular/MDbootstrap starting point (ng-uikit-pro-standard-6.2.0)
- I added ng g m modules/usermanagement --routing (same as angular.io example)
- in app folder I added app-routing.module.ts (same as angular.io example)
- checked and double checked everything to ensure it is equal to angular.io example
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.
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 free 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.
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: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
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