angular-cli: Does not generate lazy routes chunks

OS?

Mac OS Sierra

Versions.

@angular/cli: 1.0.0-rc.1
node: 7.4.0
os: darwin x64
@angular/common: 4.0.0-rc.2
@angular/compiler: 4.0.0-rc.2
@angular/core: 4.0.0-rc.2
@angular/forms: 4.0.0-rc.2
@angular/http: 4.0.0-rc.2
@angular/platform-browser: 4.0.0-rc.2
@angular/platform-browser-dynamic: 4.0.0-rc.2
@angular/router: 4.0.0-rc.2

Repro steps.

At first, I use ng build --prod --watch=true with correct path for lazy module, but I can’t see any lazy route chunks

const appRoutes: Routes = [
  {
    path: 'admin', component: LayoutComponent, canActivate: [AuthGuardService],
    children: [
        {path: 'bike', loadChildren: 'app/bike/bike.module#BikeModule',},
    ]},
];

Hash: f9d9290bb80836ad5ad2
Time: 24703ms
chunk    {0} polyfills.062e66d5506f88fa9a04.bundle.js (polyfills) 200 kB {4} [initial] [rendered]
chunk    {1} main.1b88c492928b4fd2fc9d.bundle.js (main) 120 kB {3} [initial] [rendered]
chunk    {2} styles.9f6e9dbf53f7c0872d3c.bundle.css (styles) 175 bytes {4} [initial] [rendered]
chunk    {3} vendor.ef6a6d2029727798afd2.bundle.js (vendor) 2.02 MB [initial] [rendered]
chunk    {4} inline.0605372a06e6490f08a6.bundle.js (inline) 0 bytes [entry] [rendered]

then I use an error path like this: ./app/bike/bike.module#BikeModule finally I change back: app/bike/bike.module#BikeModule I see the lazy route chunk output:

Hash: c192e290b753f07c3589
Time: 11943ms
chunk    {0} polyfills.062e66d5506f88fa9a04.bundle.js (polyfills) 200 kB {4} [initial]
chunk    {1} main.15453f3e2945e4eade17.bundle.js (main) 120 kB {3} [initial] [rendered]
chunk    {2} styles.9f6e9dbf53f7c0872d3c.bundle.css (styles) 175 bytes {4} [initial]
chunk    {3} vendor.be4ca73bd2f535511b0a.bundle.js (vendor) 2.02 MB [initial] [rendered]
chunk    {4} inline.206e421169df75a8322e.bundle.js (inline) 0 bytes [entry] [rendered]
chunk    {5} 5.00405610a134f55380e0.chunk.js 11.4 kB {1} [rendered]

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 34 (7 by maintainers)

Most upvoted comments

I’m still seeing this problem. I’ve actually edited the route module, and that fixes it, but I need to deploy with the lazy loaded module chunks! I’ve updated the latest the angular-compiler, and I’m using angular 4. Does anyone have a workaround besides editing the app-route-module???

gmetrix on Sep 27, 2017

I’m still not sure where stuff is breaking exactly, but it seems to be related to having the routes in AppRoutingModule.

Having them in app.module.ts instead works to work fine:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MainModule,
    RouterModule.forRoot([
      {path: '', pathMatch: 'full', redirectTo: '/login',},
      {path: 'login', component: LoginComponent,},
      {path: 'lazy', loadChildren: 'app/lazy/lazy.module#LazyModule',},
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

filipesilva on Mar 8, 2017

FYI, this same thing is happening with @ngtools in webpack if you use a vendor file and webpack.DllPlugin. The bundles aren’t created but it expects them to be there.

Using awesome-typescript makes it work again but then you lose AOT obviously.

JohnGalt1717 on Jun 21, 2017

@filipesilva I find out that it’s a bug for @angular/compiler-cli, I have commit a pull request to fix it. angular/angular#16438

Adol1111 on Apr 30, 2017

I tried an app with some lazy loaded routes and could see the lazy chunks being correctly generated on ng serve and ng build --watch. Can you upload a repo where you see this behaviour?

filipesilva on Mar 8, 2017

I have the same problem as described by gmetrix commented on 28 Sep 2017. with CLI 1.6.6 and NG 5.2.2.

Strange enough, the example code from the tutorial at https://angular.io/guide/lazy-loading-ngmodules is working fine. Ng build generates module chunk js properly. though my app structure is pretty similar to the example in the tutorial.

zijianhuang on Jan 31, 2018

I still have this issue. Upgraded the cli to 1.5. I have one lazy loaded route right now. The chunk file is created, however the I get an error because it’s not adding the output directory to the path for the script tag. Anyone else having this?

TerrySlack on Nov 6, 2017

I am running into the same issue. I am using @angular/cli 1.0.1 and @angular 4.0.1. Is there a workaround or the lazy loading is not working for the latest @angular/cli?

teeSee on Apr 27, 2017

Actually, the core of it seems to actually be the forRoot method. Changing the import from AppRoutingModule.forRoot(), to just AppRoutingModule makes it work.

@hansl I remember there was some conversation about forRoot, is this behaviour intended?

filipesilva on Mar 8, 2017

Thank you for making this repro.

I cloned it, ran npm install, ran ng serve and could see no lazy routes being generated. Then I added a newline in src/app/app-routing.module.ts and saved, and actually saw this error:

kamik@T460p MINGW64 /d/sandbox/ng-lazy-load-demo (master)
$ ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: 4e3df498ca10b9b2d7f4
Time: 7805ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 155 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 8.85 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.78 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.99 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
webpack: Compiling...
 10% building modules 1/2 modules 1 active ...ad-demo\src\app\app-routing.module.tsError: No module factory available for dependency type: ContextElementDependency
    at Compilation.addModuleDependencies (D:\sandbox\ng-lazy-load-demo\node_modules\webpack\lib\Compilation.js:206:21)
    at Compilation.processModuleDependencies (D:\sandbox\ng-lazy-load-demo\node_modules\webpack\lib\Compilation.js:195:8)
    // ...

I tried using linking master copy of the CLI, and on rebuild I didn’t see an error and instead I saw a single extra lazy chunk called 5.chunk.js. Which is also pretty weird… it should be 0.chunk.js instead.

There’s something odd here, will investigate further.

filipesilva on Mar 8, 2017

This also happens to me even on ng serve. when i add the --aot flag it generates the chunks.

OS

macOS Sierra 10.12.3

Versions.

@angular/cli: 1.0.0-rc.1 node: 6.10.0 @angular/common: 2.4.9 @angular/compiler: 2.4.9 @angular/core: 2.4.9 @angular/forms: 2.4.9 @angular/http: 2.4.9 @angular/platform-browser: 2.4.9 @angular/platform-browser-dynamic: 2.4.9 @angular/router: 3.4.9

exequiel09 on Mar 4, 2017