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.

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

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