Search code examples
angularwebpacklazy-loadingwebpack-2

Angular Lazy loading from node_modules


I split my project between multiple Git Repos and now I have problem with Lazy loading

If I Copy the sourceCode from child repo to main repo, with use of the following syntax

{
    path: 'child-app',
    loadChildren: './shared/child/src/app/child-app.module#ChildAppModule'
},

I can build and serve my project without any problem But if I change the Route to point to node_modules like below

{
    path: 'child-app',
    loadChildren: '@mine/child/src/app/child-app.module#ChildAppModule'
},

OR

{
    path: 'child-app',
    loadChildren: '../../node_modules/@mine/child/src/app/child-app.module#ChildAppModule'
},

It will raise this error :

ERROR in ./src/$$_gendir lazy
Module not found: Error: Can't resolve '/Users/myuser/Projects/web-app
/src/node_modules/@mine/child/src/app/child-app.module.module.ngfact
ory.ts' in '/Users/myuser/Projects/web-app/src/$$_gendir'
 @ ./src/$$_gendir lazy
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.browser.ts
 @ multi ./src/main.browser.ts webpack-hot-middleware/client?path=/__webpa
ck_hmr&timeout=2000&reload=true&noInfo=true

I am using webpack 2 and ngtools/webpack to compiling my project


Solution

  • Lazy loading module from node_modules with JIT is working fine but Lazy loading with AOT is not working

    github.com/angular/angular-cli/issues/5986

    the best solution that I found is creating a symlink from src/app/something to node_modules/something

    ln -s source destination
    

    and it is working fine :)