angular-cli: WARNING in Duplicated path in loadChildren detected during a rebuild

Versions

Angular CLI: 1.5.0
Node: 8.9.1
OS: win32 x64
Angular: 5.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.38
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.8
typescript: 2.4.2
webpack: 3.8.1

Repro steps

Observed behavior

With Angular CLI, if a project contains a module that is lazy loaded, when we modify the file containing the routes, after the automatic rebuild by Angular CLI, the following warning message is displayed in the console :

WARNING in Duplicated path in loadChildren detected during a rebuild. We will take the latest version detected and override it to save rebuild time. You should perform a full build to validate that your routes don't overlap.

Desired behavior

Desired : No warning message displayed in console.

Otherwise it might cause bugs while developping. And even without any real issue, the warning message is a bit scary and could prevent from acknowledging real bugs in the application.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 28
  • Comments: 27 (2 by maintainers)

Most upvoted comments

About the error: “WARNING in Duplicated path in loadChildren detected during a rebuild”… I managed to fix this by adding the full path to the loadChildren string.

I changed the string './orders/orders.module#OrdersModule' to 'app/orders/orders.module#OrdersModule'.

Now the error has gone, I think that this occurs because of the atribute string having the same ‘initial’ path of the loadChildren…

Before (with error): { path: 'orders', loadChildren: './orders/orders.module#OrdersModule'} Now: { path: 'orders', loadChildren: 'app/orders/orders.module#OrdersModule'}

I also get a lot of yellow warnings but I think I found my issue.

In my layout routes:

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', redirectTo: 'dashboard' },
            { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
            { path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
            { path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
            { path: 'forms', loadChildren: './form/form.module#FormModule' },
            { path: 'bs-element', loadChildren: './bs-element/bs-element.module#BsElementModule' },
            { path: 'grid', loadChildren: './grid/grid.module#GridModule' },
            { path: 'components', loadChildren: './bs-component/bs-component.module#BsComponentModule' },
            { path: 'blank-page', loadChildren: './blank-page/blank-page.module#BlankPageModule' },
            { path: 'order', loadChildren: './order/order.module#OrderModule' },
            { path: 'threed', loadChildren: './threed/threed.module#ThreedModule'}
        ]
    }
];

If I add a , after the last one like this { path: 'threed', loadChildren: './threed/threed.module#ThreedModule'}, then it will dump several lines of yellow saying duplicates just like @istiti.

Make sure you stop ng serve and start it again. Once the yellow is there it will still show if you make the change without stopping ng serve.

This warning seems to be a red herring. Stopping and restarting “ng serve” seems to fix the warning almost all the time.

I really dislike this indeterminism because I don’t know if there is something wrong with my app (in this case routes - which might be serious if the warning is real).

I noticed some errors also disappear after I restart ‘ng serve’ especially when I reorganize my code in modules, I see tonnes of errors - which disappear after a restart of ‘ng serve’

Restarting “ng serve” not showing the warnings and errors anymore makes Angular look flaky. I hope things get better in future revisions

And in “@angular/cli”: “1.6.3”,

same error here: image

I did the same as @frederikocmr did and it works like a charm! One must use the absolute path.

And in “@angular/cli”:“1.6.5”

Failed to compile.

Error: Duplicated path in loadChildren detected: "./equipment-children.module#EquipmentChildrenModule" is used in 2 loadChildren, but they point to different modules "(/home/www/angular/app/admin/equipment/equipment-children.module.ts and "/home/www/angular/app/admin/equipment/equipment/equipment-children.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.
    at /home/www/node_modules/@angular/compiler-cli/src/ngtools_api.js:59:23
    at Array.forEach (<anonymous>)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/www/node_modules/@angular/compiler-cli/src/ngtools_api.js:55:20)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/home/www/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (/home/www/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:565:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

default

Yep, same issue, project builds and runs but it would be nice to understand why (no routes overlap in my config), very yellow and annoying

I find this warning confusing. It does not specify which routes were overlapping or for which paths. It is also unclear to me what the CLI is doing to save rebuild time. I appreciate that this warning his here but I’m not sure what to do about it or how likely it is a problem.

I’m seeing this warning twice per build, probably because it is checked by two systems:

https://github.com/angular/angular-cli/blob/4b0c7a35359effc1d93cd3bb5ddc5c441b3cf154/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L448-L455

https://github.com/angular/angular-cli/blob/6984cc2b68dac568255fd27e8ec84d53052ea6c3/packages/%40ngtools/webpack/src/plugin.ts#L319-L325

@frederikocmr it works thanks .

Warnings also exist in Angular CLI: 1.6.1