Does not generate lazy routes chunks

[Adol1111]

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]

[exequiel09]

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

[filipesilva]

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?

[Adol1111]

I add a repo: https://github.com/Adol1111/ng-lazy-load-demo.git

Starting with ng serve, there are no lazy routes chunks being generated. If I do any changes for app-routing.module.ts ( like a space, a line break, or other changes) , lazy routes chunks will be generated.

[filipesilva]

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]

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]

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?

[Adol1111]

Thx, that is ok now.

I just provide a AuthGuard for AppRoutingModule. I will move it to coreModule

[exequiel09]

@filipesilva putting the routes on my current project to app.module.ts (followed what you did above) does not generate the chunks. Doing ng serve --aot or ng build --prod --aot or with --aot generates the lazy load chunks. I can't reproduce it to a project freshly created. Will link it here if i am able to make some reproduction.

Also tried nuking node_modules by installing/uninstalling @angular/cli. No good.

[ManuelRauber]

I've the same issues. But I recognised, that after running ng serve the chunks are not built. But when I change a file and the watcher gets triggered, then the chunks are built.

It doesn't matter how the file (app-routing.module.ts) is called or what's the name of the module itself or if the routes are not within an own module.

(Angular 4.0.0-rc.5, Angular CLI 4.0.0-rc.2)

[reblace]

Seeing the same issue after upgrading to ng4. I import my app routing module without forRoot(). I will try to put together a small example.