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:

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.`)
	);
	}

[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