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

[arnaudoisel]

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

• Checkout the project : https://github.com/arnaudoisel/lazy-loading-routes-bug
• > yarn (or npm install)
• > ng serve
• Modify the "routes.ts" file (by adding a comment for example)
• Save the file
  => The warning will be displayed in the console

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.

[wkylin]

node 9.1.0 angular-cli 1.5.5 loadChildren.....

[aciccarello]

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

[elvisbegovic]

same error here:

[JuliaRakitina]

same issue

[dylanjmcdonald]

Warnings also exist in Angular CLI: 1.6.0

[Fiontan]

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

[pbrink231]

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.

[zngong]

Warnings also exist in Angular CLI: 1.6.1

[MiroKov]

And in
"@angular/cli": "1.6.2",

[RainingNight]

And in
"@angular/cli": "1.6.3",

[prvn3294]

Hi, I am also facing the same, Is there any solution you guys found or any workaround ?

[kotpal]

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

[Rory-Gaddin]

Solution suggested by @pbrink231 worked for me. I also had a rogue comma at the end of my last route and removing it fixed the issue.

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.

[candy4290]

And in
"@angular/cli":"1.6.5"

[elAndyG]

It occurs with the following steps (in my scenario)
@angular/cli: 1.6.6

1. make sure ng serve is not running
2. add a bug to one of your components (save)
3. ng serve
4. should get a red line error

ERROR in {your ts file}

webpack: failed to compile`
webpack: Compiling...
12% building modules ..... ERROR in {your ts file}

Date - Hash - Time
3 unchanged chunks
{chunk list}

Warning in Duplicated path....don't overlap

1. fix error and save

webpack: Compiled with warnings.
webpack: Compiling...
Date: 2018-01-30T13:50:38.087Z - Hash: 8cdce4afb09eb7f31a1d - Time: 954ms
11 unchanged chunks
chunk {YOUR.module} YOUR.module.chunk.js () 110 kB [rendered]

It looks like CLI is reverting back to the last successful build. Is that true? Cant seem to find an option on ng serve to just let it fail.

[repertory]

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)

[batdelger]

I put log in @ngtools/[email protected]/src/angular_compiler_plugin.js. Here is an issue: if (this._lazyRoutes[moduleKey] !== modulePath). It seems path separator slashes don't match each other. _lazyRoutes uses / and modulePath uses \.
lazyRouter: D:/products/nes-web3/nes-web-beta/apps/nes/src/app/login/login.module.ts
modulePath: D:\products\nes-web3\nes-web-beta\apps\nes\src\app\login\login.module.ts

[frederikocmr]

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

[patrickgdl]

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

[zinderud]

@frederikocmr it works thanks .

[edcline]

full path worked great!

[lakerko]

@frederikocmr thank you very much

[dreamdevil00]

@frederikocmr Thanks very a lot .

[raphaelfruneaux]

thanks @frederikocmr!! 👍

[kingkassem]

@frederikocmr it works thanks .

[eagor]

changing from ./employees/employees.module to app/employees/employees.module results in browser console error
Error: Cannot find module 'app/employees/employees.module'.
ng build bundles fine though.

both the app-routing.module.ts and employees folder are immediate children of the app folder

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