Angular-cli: 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]



md5-75f124e93886c3bf871ea73197b49e87



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.

[ManuelRauber]

@reblace with current final versions, it's working for me again.

[zackarychapple]

Just started experiencing this too. However for us it's not everyone on the repo it's just me. When I edit the file that has my lazy loaded routes I get the error from #4246

[michaelonubogu]

Seeing the same issue as well. I have to change my app-routing.module file, before I see the chunks generated. Happens with ng4

[teeSee]

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?

[Adol1111]

@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

[filipesilva]

@Adol1111 wow thanks for fixing this!

[JohnGalt1717]

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.

[filipesilva]

@JohnGalt1717 @ngtools/webpack does not support being used with DllPlugin unfortunately. See https://github.com/angular/angular-cli/issues/4565 for more information.

[JohnGalt1717]

Right, but there is no feasible work around in there from what I can see either. Definitely needs to be fixed one way or another to make this all go together properly.

[gmetrix]

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???

[JohnGalt1717]

The reason why this happens is because you have Angular components in your vendor file. They must be included in your main angular chunk. As soon as you don't, it won't generate the chunks properly. So you need to have code that moves them into the main package and not in the vendor.js if production and using ngtools.

[Sevensnake]

using angularcli @JohnGalt1717 not to sure on that. have example maybe.

[JohnGalt1717]

I use Webpack but the same principle will apply. IF you have a vendor.js being generated make sure that when choosing production you don't have any angular libraries in vendor.js otherwise this will happen.

[Sevensnake]

ok @JohnGalt1717 so weird I built again and then everything fell in place. Not sure. but it works now and made individual chucks.

[TerrySlack]

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?

[pateldol]

I have also upgraded the cli to 1.5 and still facing same issue. If without changing anything, I just save child module (it will re-compile app) than that child routes will work fine. Does anybody have any solution?

[Adol1111]

@pateldol Can you upload a repo? In my case, it's a bug about compiler-cli which version under 4.1.3, not cli.

[Sevensnake]

for some reason it just started working. after I compliled 8 times. weird.

[ghost]

Any news?

[Sevensnake]

Yes. I deleted all node modules and then made sure I had at least 2.4
typescript installed. and it worked.

Sent with MailTag http://www.mailtag.io

On Sun, Nov 19, 2017 at 5:53 PM, EnricoMazzucchelli <
[email protected]> wrote:

Any news?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/5204#issuecomment-345557140,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADu4owVaeJpfQcL9bEF3TLrefjJQ7kxSks5s4LF8gaJpZM4MSaVQ
.

--

Anthony P
[phone]

[zijianhuang]

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.

[mistrykaran91]

Can I load specific lazy loaded chunk in prod build ?

[LiMeii]

I met the same issue, in angular5.0 + webpack3.10.0 no chunk files for lazy loading. here is my root cause, hope can help someone:
in my app-routing.module.ts:

import { NgModule } from '@angular/core';
//import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { RouterModule, Routes } from '@angular/router';
import { AppCustomPreloader } from './app.custom.preloader';

const routes: Routes = [
    {
        path: 'dashboard',
        loadChildren: './modules/dashboard/dashboard.module#DashboardModule',
        data: { preload: true }
    },
    { path: 'settings', loadChildren: './modules/settings/settings.module#SettingsModule' },
    { path: 'reports', loadChildren: './modules/reports/reports.module#ReportsModule' },

];

@NgModule({
    // imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })],
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: AppCustomPreloader, useHash: true })],
    exports: [RouterModule],
    providers: [AppCustomPreloader]
})
export class AppRoutingModule { }

and at the same time I import DashboardModule SettingsModule SettingsModule in my app.module.ts

that's the reason why no chunk file for lazy loading module, I guess if there has loadchildren for business modlue and import it in app.module.ts, then angular just ignore the lazy loading settings.

remove imported module in app.module.ts , it's working fine.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}