Routing duplicate (Duplicated path in loadChildren detected)

[Maxime]

Hi,

I have a problem with router in angular 5 and i have the same with 4.

I have this error message : 

ERROR in Duplicated path in loadChildren detected: "./+auth/auth.module#AuthModule" is used in 2 loadChildren, but they point to different modules "(D:/Booking/src/app/+driver/+auth/auth.module.ts and "D:/Booking/src/app/+client/+auth/auth.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.

I use the same auth module in different route /client and /driver

How i can solve this ?

Thx for reply.

[Maxime]

An idea ?

[Sander Elias]

Hi Maxine,

If it's the same route, you can't have it point to different components. The router doesn't know what to pick in that case, so it throws the error you are seeing. If you need 2 different components, don't use the same route. if it points to the same component, you don't need 2 routes to it.

Regards

Sander

[Maxime]

Hi Sander,

Thx for reply !

In my app routing i have this :

export const appRoutes: Routes = [
    {
        path: 'driver',
        component: MainLayoutComponent,
        loadChildren: 'app/+driver/driver.module#DriverModule'
    },
    {
        path: 'client',
        component: MainLayoutComponent,
        loadChildren: 'app/+client/client.module#ClientModule'
    }
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

The driver and client and in separate folders 

driver/driver.component.ts

driver/driver.module.ts

driver/driver.routing.ts

driver/auth/auth.component.ts

driver/auth/auth.module.ts

driver/auth/auth.routing.ts

client/client.component.ts

driver/client.module.ts

client/client.routing.ts

client/auth/auth.component.ts

client/auth/auth.module.ts

client/auth/auth.routing.ts

In my client routing i have this :

import {Routes, RouterModule} from "@angular/router";


export const routes: Routes = [

    {
        path: 'auth',
        loadChildren: './+auth/auth.module#AuthModule'
    },

];

export const routing = RouterModule.forChild(routes);

And in my driver routing i have this : 

 

import {Routes, RouterModule} from "@angular/router";

export const routes: Routes = [

    {

         path: 'auth',

         loadChildren: './+auth/auth.module#AuthModule'

    }

];

export const routing = RouterModule.forChild(routes);

My auth routing contains this : 

 

import {ModuleWithProviders} from "@angular/core"

import {Routes, RouterModule} from "@angular/router";

export const routes: Routes = [

    {

        path: 'login',

        loadChildren: './+login/login.module#LoginModule'

    },

    {

        path: 'register',

        loadChildren: './+register/register.module#RegisterModule'

    },

    {

        path: 'forgot-password',

        loadChildren: './+forgot/forgot.module#ForgotModule'

    }

];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

 

Thx for your help :)