Topic: Bug with the lazy loading.
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.
@Adrian Sawicki - we rly need update.
htdong pro commented 7 years ago
@Adrian Sawicki - Is there any update on this? Developing an angular app without capability for lazy loading is really big a problem.
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!")
);
}
TURKI Hosni pro commented 7 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 7 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
kaimeng pro commented 7 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.tshtdong pro commented 7 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No