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

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.

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

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:

angular-cli/packages/@ngtools/webpack/src/angular_compiler_plugin.ts

Lines 448 to 455 in 4b0c7a3

    
           if (this._lazyRoutes[moduleKey] !== modulePath) { 
        
             // Found a duplicate, this is an error. 
        
             this._warnings.push( 
        
               new Error(`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.`) 
        
             ); 
        
           }

angular-cli/packages/@ngtools/webpack/src/plugin.ts

Lines 319 to 325 in 6984cc2

    
           } else if (this._lazyRoutes[routeKey] !== route) { 
        
             this._compilation.warnings.push( 
        
               new Error(`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.`) 
        
             ); 
        
           }

same error here:

same issue

Warnings also exist in Angular CLI: 1.6.0

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

@istiti

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.

Warnings also exist in Angular CLI: 1.6.1

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

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

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

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

@pbrink231

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.

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)

I put log in @ngtools/webpack@1.9.7/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

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

@frederikocmr

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

@frederikocmr

@frederikocmr it works thanks .

full path worked great!

@frederikocmr

@frederikocmr thank you very much

@frederikocmr

@frederikocmr Thanks very a lot .

@frederikocmr

thanks @frederikocmr!! 👍

@frederikocmr

@frederikocmr it works thanks .

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

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

WARNING in Duplicated path in loadChildren detected during a rebuild #8722

Versions

Repro steps

Observed behavior

Desired behavior

2 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (this._lazyRoutes[moduleKey] !== modulePath) {
	// Found a duplicate, this is an error.
	this._warnings.push(
	new Error(`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.`)
	);
	}

	} else if (this._lazyRoutes[routeKey] !== route) {
	this._compilation.warnings.push(
	new Error(`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.`)
	);
	}

WARNING in Duplicated path in loadChildren detected during a rebuild #8722

Description

Versions

Repro steps

Observed behavior

Desired behavior

Activity

wkylin commented on Dec 5, 2017

aciccarello commented on Dec 11, 2017

elvisbegovic commented on Dec 12, 2017

JuliaRakitina commented on Dec 12, 2017

dylanjmcdonald commented on Dec 13, 2017

Fiontan commented on Dec 14, 2017

pbrink231 commented on Dec 15, 2017

zngong commented on Dec 21, 2017

MiroKov commented on Dec 21, 2017

RainingNight commented on Jan 3, 2018

prvn3294 commented on Jan 12, 2018

kotpal commented on Jan 12, 2018

Rory-Gaddin commented on Jan 22, 2018

2 remaining items

repertory commented on Feb 1, 2018

batdelger commented on Feb 5, 2018

frederikocmr commented on Feb 15, 2018

patrickgdl commented on Feb 20, 2018

zinderud commented on Feb 25, 2018

edcline commented on Mar 2, 2018

lakerko commented on Mar 21, 2018

dreamdevil00 commented on Mar 27, 2018

raphaelfruneaux commented on Apr 4, 2018

kingkassem commented on Apr 7, 2018

eagor commented on May 21, 2018

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions