Lazy Loading not workin

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Lazy Loading not workin

hellomdb pro asked 6 years ago

Whom it may concern, I have just purchased MDB Pro for angular. I can not create lazy loading module when I use "npm start" I got the error below. Here is my step. 1/ I download QuickStart: npm start, everything went well 2/ Set up lazy loading module. npm start >> Error. (I do not touch angular.jon file.) My question is MDB will support for lazy loading module? If yes, please provide me an instruction or email me an example that set up lazy loading module. -------- ERROR here --------- ** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ ** 49% building modules 333/362 modules 29 active …modules\rxjs\_esm5\internal\util\not.js× ｢wdm｣: Error: No module factory available for dependency type: ContextElementDependency at addDependency(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:407:12) at iterationOfArrayCallback(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:88:3) at addDependenciesBlock(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:423:5) at iterationOfArrayCallback(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:88:3) at addDependenciesBlock(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:426:5) at Compilation.processModuleDependencies(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:434:4) at afterBuild(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:556:15) at buildModule.err(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:600:11) at callback(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:358:35) at module.build.error(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:394:12) at resolveDependencies(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\ContextModule.js:233:4) at ContextModule.result.resolveDependencies(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:476:25) at ContextModule.build(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\ContextModule.js:158:8) at Compilation.buildModule(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:362:10) at factory.create(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compilation.js:583:14) at hooks.afterResolve.callAsync(C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\ContextModuleFactory.js:150:16) C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\neo-async\async.js:14 throw new Error('Callback was already called.'); ^ Error: Callback was already called. at throwError (C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\neo-async\async.js:14:11) at C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\neo-async\async.js:2805:7 at process._tickCallback (internal/process/next_tick.js:61:11) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ng-uikit-pro-standard-lib@6.2.3 start: `ng serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ng-uikit-pro-standard-lib@6.2.3 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Johndoe\AppData\Roaming\npm-cache\_logs\2018-09-15T22_47_42_533Z-debug.log

Arkadiusz Idzikowski staff answered 6 years ago

Dear hellomdb, Thanks for the example app. I deleted package-lock.json file (it would be good idea to delete node_modules as well if you have already installed packages), ran npm install again and then I was able to open the app without problems with ng serve command. Please check if that works for you. Regards, Arek

Arkadiusz Idzikowski staff answered 6 years ago

Dear hellomdb, Please try to remove webpack from your package.json file, then delete node_modules and package-lock.json and run npm install again. Regards, Arek

hellomdb pro commented 6 years ago

Hello Arek, Thanks for a quick reply. As you mention, I followed those steps, I still got an error below. Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3>6.2.3> npm i > node-sass@4.9.0 install C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\node-sass > node scripts/install.js Cached binary found at C:\Users\Johndoe\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-64_binding.node > node-sass@4.9.0 postinstall C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\node-sass > node scripts/build.js Binary found at C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\node-sass\vendor\win32-x64-64\binding.node Testing binary Binary is fine > @angular/cli@6.0.8 postinstall C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular\clid-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\@angular\cli > node ./bin/ng-update-message.js npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added 1111 packages from 1255 contributors and audited 21320 packages in 309.071s found 15 vulnerabilities (9 low, 6 high) PS C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3> npm start PS C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3> > ng-uikit-pro-standard-lib@6.2.3 start C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3 > ng serve Cannot find module 'webpack/lib/node/NodeTemplatePlugin' Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) at Module.require (internal/modules/cjs/loader.js:650:17) at require (internal/modules/cjs/helpers.js:20:18) at Object. (C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3\node_modules\html-webpack-plugin\lib\compiler.js:9:28) at Module._compile (internal/modules/cjs/loader.js:702:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10) at Module.load (internal/modules/cjs/loader.js:612:32) at tryModuleLoad (internal/modules/cjs/loader.js:551:12) at Function.Module._load (internal/modules/cjs/loader.js:543:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ng-uikit-pro-standard-lib@6.2.3 start: ng serve npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ng-uikit-pro-standard-lib@6.2.3 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Johndoe\AppData\Roaming\npm-cache\_logs\2018-09-17T18_27_20_229Z-debug.log PS C:\Users\Johndoe\Desktop\Testing\ng-uikit-pro-standard-6.2.3\ng-uikit-pro-standard-6.2.3>

Arkadiusz Idzikowski staff answered 6 years ago

Dear hellomdb, Please send me an example app on which I could debug this problem (you can send it to me at a.idzikowski@mdbootstrap.com). Regards, Arek

hellomdb pro commented 6 years ago

Hello, Arkadiusz I sent you an example app, please check you email and help me take a look. Thanks.

Arkadiusz Idzikowski staff commented 6 years ago

Dear hellomdb, I didn't receive any email. Could you try to send it again? Regards, Arek

hellomdb pro commented 6 years ago

I have just sent it again, please check your spam folder. I posted to GDrive: https://drive.google.com/open?id=1VcEmFUgLK5fbhhrddp57uxsW9kkXdcEv Thank you

hellomdb pro answered 6 years ago

Hello, Arkadiusz Here is GDrive link: example app I sent you an example app, please check you email or spam folder and help me take a look. Thanks.  

hellomdb pro answered 6 years ago

Hello, Arkadiusz, As you suggested, after removing package-lock.json, then npm install and ng serve works fine.
  • Then, I add mdb button at app.component.ts, it is styled by mdb.
  • But, when I add mdb button to a component at Lazy loading module, it has not styled by mdb.
Here is GDrive link: example app Here is image link: Image Demo is Lazy loading: http://localhost:4200/demo/buttons Thank you.

Arkadiusz Idzikowski staff answered 6 years ago

Dear hellomdb, You need to add our MDBBootstrapModule to your lazy loaded module. If you have more modules you can consider creating shared module: https://angular.io/guide/sharing-ngmodules. In similiar cases please send those example apps directly to me instead of sharing link on forum because it is pro product. Regards, Arek

hellomdb pro commented 6 years ago

Hello, Arkadiusz Idzikowski. It works, and I will send directly to you later on. Thank you.
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Computer desktop
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags
installation
Related topics
4
Gulp issue
2
Confused installation instructions
2
How to fix npm install error for ng-uikit-pro-standard
1
No access to GitLab repo after purchase
1
Trying to Install MDBReact Pro
About author
hellomdb
Pro User
70Support score
8Questions 3Answers
0Snippets likes 0Snippets