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]

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

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?

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.

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.

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]
})

@hansl

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?

Thx, that is ok now.

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

@filipesilva

@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.

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)

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.

@JohnGalt1717

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

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.

@JohnGalt1717

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

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?

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?

@pateldol

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

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

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 < ***@***.***> wrote: Any news? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5204 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADu4owVaeJpfQcL9bEF3TLrefjJQ7kxSks5s4LF8gaJpZM4MSaVQ> .

-- Anthony P (919) 671-7234

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.

Can I load specific lazy loaded chunk in prod build ?

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.

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.}

Navigation Menu

Repository navigation

Does not generate lazy routes chunks #5204

OS?

Versions.

Repro steps.

OS

Versions.

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Does not generate lazy routes chunks #5204

Description

OS?

Versions.

Repro steps.

Activity

exequiel09 commented on Mar 4, 2017

OS

Versions.

filipesilva commented on Mar 8, 2017

Adol1111 commented on Mar 8, 2017

filipesilva commented on Mar 8, 2017

filipesilva commented on Mar 8, 2017

filipesilva commented on Mar 8, 2017

Adol1111 commented on Mar 8, 2017

exequiel09 commented on Mar 8, 2017

ManuelRauber commented on Mar 20, 2017

reblace commented on Mar 30, 2017

13 remaining items

uvconnects commented on Nov 3, 2017

JohnGalt1717 commented on Nov 3, 2017

uvconnects commented on Nov 3, 2017

TerrySlack commented on Nov 6, 2017

pateldol commented on Nov 14, 2017

Adol1111 commented on Nov 15, 2017

uvconnects commented on Nov 15, 2017

uvconnects commented on Nov 20, 2017

zijianhuang commented on Jan 31, 2018

mistrykaran91 commented on Jul 23, 2018

LiMeii commented on Oct 8, 2018

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions