Angular 16 feature module routing

Question

I have an Angular 16 app where I am adding a feature module which is currently already working, but I am struggling with the routing.

This is part of the current route configuration in app-routing.module.ts.

...

{
    path: 'dashboard',
    component: DashboardPageComponent,
    pathMatch: 'full'
},
{
    path: 'machines',
    loadChildren: () =>
        import('./app-machines.module').then(
            (m) => m.AppMachinesComponentsModule,
        )
}

...

This is the current and working routing configuration of the feature module app-machines-routing.module.ts:

RouterModule.forChild([
    {
        path: '',
        component: MyMachinesPageComponent
    },
    {
        path: 'details/:machineNumber',
        component: MachineDetailPageComponent
    }
])

The routes are stored in an enum like that:

export enum AppRoutes {
    ...
    UserMachines = 'machines',
    UserMachinesDetails = 'machines/details/:machineNumber',
    ...
}

I like to use this enum in app-routing.module.ts and in my app-machines-routing.module.ts for the route paths. This is not possible, because the feature routing module cannot contain the prefix machines, otherwise the route is not found. Is there a possibility to have the same paths in both routing modules?

Answer 1

But all you need to do is add one more ENUM for the blank route like so

export enum AppRoutes {
    ...
    Dashboard = 'dashboard',
    UserMachinesLazyRoute = 'machines',
    UserMachines = '',
    UserMachinesDetails = 'details/:machineNumber',
    ...
}

Then the routing will be

app-machines-routing.module.ts:

RouterModule.forChild([
    {
        path: AppRoutes.UserMachines,
        component: MyMachinesPageComponent
    },
    {
        path: AppRoutes.UserMachinesDetails,
        component: MachineDetailPageComponent
    }
])

app-routing.module.ts

...

{
    path: AppRoutes.Dashboard,
    component: DashboardPageComponent,
    pathMatch: 'full'
},
{
    path: AppRoutes.UserMachinesLazyRoute,
    loadChildren: () =>
        import('./app-machines.module').then(
            (m) => m.AppMachinesComponentsModule,
        )
}

...

There is another way to do it, but the top method is better and helps with readability and overall the better method

enum

export enum AppRoutes {
    ...
    Dashboard = 'dashboard',
    UserMachinesLazyRoute = '',
    UserMachines = 'machines',
    UserMachinesDetails = 'machines/details/:machineNumber',
    ...
}

app-routing.module.ts

...

{
    path: AppRoutes.Dashboard,
    component: DashboardPageComponent,
    pathMatch: 'full'
},
{
    path: AppRoutes.UserMachinesLazyRoute,
    loadChildren: () =>
        import('./app-machines.module').then(
            (m) => m.AppMachinesComponentsModule,
        )
}

...

app-machines-routing.module.ts:

RouterModule.forChild([
    {
        path: AppRoutes.UserMachines,
        component: MyMachinesPageComponent
    },
    {
        path: AppRoutes.UserMachinesDetails,
        component: MachineDetailPageComponent
    }
])