Topic: Bug with the lazy loading.

Hosboss pro asked 6 years ago


Hello,Do you have a solution for duplicate module loading file with the lazy loaded?Like the ToastrModule? Trying with the SharedModule I have no better results.Thank you.

Damian Gemza staff answered 6 years ago


Hey guys, I've made a reproduction repository on which alerts are working fine with Lazy Loading. Please check it. Git clone, put your pro token into package.jso, npm install and ng serve. Let me know, if this is what you need. https://github.com/Bloodcast69/lazy-load Best Regards, Damian

kaimeng pro answered 6 years ago


I still have problem with lazy loading after applying the workaround. I use same version (4.3.5) of MDB Pro - out-of-the-box MDB_Angular_PRO_4.3.5.zip The error messages relate to webpack and after scanning the web, it seemed to point to multiple webpack version dependencies. >> npm ls webpack +-- @angular/cli@1.2.6 | `-- webpack@2.4.1 +-- UNMET PEER DEPENDENCY @angular/compiler@4.3.6 +-- UNMET PEER DEPENDENCY @angular/core@4.3.6 `-- ngm-cli@0.5.2 +-- UNMET PEER DEPENDENCY @angular/compiler@4.4.6 +-- UNMET PEER DEPEND@ENCY @angular/core@4.4.6 `-- npm-submodules@0.5.2 `-- webpack@2.3.2 ngm-cli and @angular/cli are using different versions of webpack. I'm stuck. Please help.

kaimeng pro commented 6 years ago

I upgraded to Angular Pro 4.3.7, so the workround is not required. Then, in package.json, I removed "ngm-cli": "0.5.x", and changed "@angular/cli": "1.2.6" ==> "@angular/cli": "1.3.x", to get rid of build errors due to multiple webpack versions dependencies. Lazy-loading works after these changes. But there were circular dependency warnings at the Toast, Accordian and Modal (1) srcapptypescriptsfreemodalsmodal.service.ts -> srcapptypescriptsfreemodalsmodalContainer.component.ts -> srcapptypescriptsfreemodalsmodal.service.ts (2) srcapptypescriptsfreemodalsmodalContainer.component.ts -> srcapptypescriptsfreemodalsmodal.service.ts -> srcapptypescriptsfreemodalsmodalContainer.component.ts (3) srcapptypescriptsproaccordioncomponentssb-item.ts -> srcapptypescriptsproaccordioncomponentssqueezebox.ts -> srcapptypescriptsproaccordioncomponentssb-item.ts (4) srcapptypescriptsproaccordioncomponentssqueezebox.ts -> srcapptypescriptsproaccordioncomponentssb-item.ts -> srcapptypescriptsproaccordioncomponentssqueezebox.ts (5) srcapptypescriptsproalertstoasttoast.component.ts -> srcapptypescriptsproalertstoasttoast.service.ts -> srcapptypescriptsproalertstoasttoast.component.ts (6) srcapptypescriptsproalertstoasttoast.service.ts -> srcapptypescriptsproalertstoasttoast.component.ts -> srcapptypescriptsproalertstoasttoast.service.ts

htdong pro commented 6 years ago

I also face the same issue where ngm-cli use different webpack of angular/cli then can not implement lazy loading module. This get stuck without solution as angular team does not see as their bug uickstart-angular5@5.2.3 /Users/donghoang/node/genesis/template ├─┬ @angular/cli@1.5.0 │ └── webpack@3.8.1 ├─┬ ngm-cli@0.5.2 │ └─┬ npm-submodules@0.5.2 │ └── webpack@2.3.2 └── webpack@3.10.0 webpack: Compiling... 10% building modules 3/3 modules 0 activeError: No module factory available for dependency type: ContextElementDependency at Compilation.addModuleDependencies (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:215:21) at Compilation.processModuleDependencies (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:204:8) at _this.buildModule.err (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:359:14) at building.forEach.cb (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:149:27) at Array.forEach () at callback (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:149:13) at module.build (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:176:11) at resolveDependencies (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:165:4) at ContextModule.result.resolveDependencies (/Users/donghoang/node/genesis/template/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:423:25) at ContextModule.build (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/ContextModule.js:105:8) at Compilation.buildModule (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:151:10) at factoryCallback (/Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/Compilation.js:344:12) at /Users/donghoang/node/genesis/template/node_modules/@angular/cli/node_modules/webpack/lib/ContextModuleFactory.js:95:13 at /Users/donghoang/node/genesis/template/node_modules/tapable/lib/Tapable.js:268:11 at done.then (/Users/donghoang/node/genesis/template/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:425:28) at Please review and advise solution

Dawid Adach pro answered 6 years ago


Dear all,
We have identified the issue. There was a 3rd party library update meanwhile, therefore we have to use it differently. Please use following instruction as a workaround:
From your MDB  package (/typescript/index.ts or /node_modules/ng-mdb-pro/index.ts) remove or comment out ToastModule from following lines:

49:

// export {

// ToastComponent, ToastContainerDirective, ToastContainerModule, ToastInjector, ToastPackage, ToastRef, ToastIconClasses,

// ToastModule, ToastService, GlobalConfig, IndividualConfig, Overlay, OVERLAY_PROVIDERS, OverlayContainer, OverlayRef

// } from './alerts/';
103:
const MODULES = [

...

110: //ToastModule,

...

];
122:
@NgModule({

imports: [
...
130: //ToastModule.forRoot(),
...
],

exports:MODULES,

providers: [

],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class MDBRootModulePro {

}

In your app.module.ts except for importing MDB and MDB PRO, import ToastModule from Typescript:
import { ToastModule } from './typescripts/pro/alerts';
or node_module
import { ToastModule } from 'ng-mdb-pro/pro/alerts';
and add it to imports:

imports: [
...
ToastModule.forRoot(),
...
],

Now you can import MDB in any other module without having an issue with Toastr, however, please do not import Toast again. If you want to use it other modules, simply import Service:

import {ToastService} from '../../typescripts/pro/alerts' 

add it to constructor:

constructor(
...
private toast: ToastService
...
) { }

and use it i.e.:

ngOnInit() {

this.initForm();

setTimeout(

() => this.toast.info("It works!")

);

}

Hosboss pro commented 6 years ago

Hello, Thanks for the solution you propose. On a next update, can you plan to set up a .forChild import for MDB (which only the Component / directives / pipes). This would be more "clean" and simpler for updates. Thank you.

htdong pro commented 6 years ago

Hello, I have tried to remove all toasty related imports as advised, but it seems there are stills other blocks that prevent to implement lazy components in MDB Pro boilterplate. Is there any other way out? Below is the error messages from attempts to implement lazy app-routing.component.ts path: '', component: AlphaComponent, data: { title: 'Public' }, children: [ { path: '', redirectTo: 'intro', pathMatch: 'full' }, { path: 'intro', loadChildren: '../component/intro.module#IntroModule' }, Error msg: 24% building modules 121/137 modules 16 active …/accordion/components/sb-item.body.html✖ 「wdm」: Error: No module factory available for dependency type: ContextElementDependency at addDependency (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:406:12) at iterationOfArrayCallback (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:88:3) at addDependenciesBlock (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:422:5) at iterationOfArrayCallback (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:88:3) at addDependenciesBlock (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:425:5) at Compilation.processModuleDependencies (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:433:4) at afterBuild (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:560:16) at _this.buildModule.err (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:606:11) at callback (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:357:35) at module.build.error (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:393:12) at resolveDependencies (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/ContextModule.js:219:4) at ContextModule.result.resolveDependencies (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:475:25) at ContextModule.build (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/ContextModule.js:148:8) at Compilation.buildModule (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:361:10) at factory.create (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:587:15) at hooks.afterResolve.callAsync (/Users/donghoang/node/genesis/tpl-mdb/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/ContextModuleFactory.js:150:16) /Users/donghoang/node/genesis/tpl-mdb/node_modules/neo-async/async.js:14 throw new Error('Callback was already called.'); ^ Error: Callback was already called. at throwError (/Users/donghoang/node/genesis/tpl-mdb/node_modules/neo-async/async.js:14:11) at /Users/donghoang/node/genesis/tpl-mdb/node_modules/neo-async/async.js:2805:7 at process._tickCallback (internal/process/next_tick.js:112:11) Thanks for reply

michalmw pro answered 6 years ago


Hey,

I'm waiting too for a solution.


Adrian Sawicki free answered 6 years ago


We're working on it.

michalmw pro commented 6 years ago

Any update? This is a critical error -> I really wait for this solution.

michalmw pro commented 6 years ago

@Adrian Sawicki - we rly need update.

htdong pro commented 6 years ago

@Adrian Sawicki - Is there any update on this? Developing an angular app without capability for lazy loading is really big a problem.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags