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

28 Answers

✔️Accepted Answer

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

Other Answers:

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

More Issues: