Dynamic adding child routes to lazy loaded module in Angular 11

Question

I'm developing a modular kind of framework for my employer. So that our customers can say which of the features they want. So I split everything in libraries and added a routing module for each of it. One of the libraries is the Navigation. It contains a component with a side-bar and a toolbar and the for its children.

So currently my AppRoutingModule looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, NavigationComponent } from '@company/navigation';

const routes: Routes = [
    {
        path: '',
        component: NavigationComponent,
        canActivate: [AuthGuard],
        data: {
            breadcrumb: null,
        },
        children: [
            {
                path: 'profile',
                loadChildren: () => import('@company/profile').then((m) => m.ProfileModule),
            },
            {
                path: 'order',
                loadChildren: () => import('@company/endeavour').then((m) => m.OrderModule),
            },
            {
                path: 'user-administration',
                loadChildren: () => import('@company/user-administration').then((m) => m.UserAdministrationModule),
            },
            {
                path: 'dashboard',
                loadChildren: () => import('@company/dashboard').then((m) => m.DashboardModule),
            },
        ],
    },
    {
        path: 'auth',
        loadChildren: () => import('@company/auth').then((m) => m.AuthModule),
    },
    { path: '**', redirectTo: '' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })],
    exports: [RouterModule],
})
export class AppRoutingModule {}

So basically I'm setting the empty route to be my NavigationComponent with an AuthGuard and set its children to be the lazy loaded modules from the other libraries.

My idea now is that I also add a NavigationRoutingModule to my navigation library

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '@company/shared';
import { NavigationComponent } from '../components/navigation/navigation.component';

const routes: Routes = [
    {
        path: '',
        component: NavigationComponent,
        canActivate: [AuthGuard],
        data: {
            breadcrumb: null,
        },
        children: [],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class NavigationRoutingModule {}

and reduce the AppRoutingModule to something like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('@company/navigation').then((m) => m.NavigationModule),
    },
    {
        path: 'auth',
        loadChildren: () => import('@company/auth').then((m) => m.AuthModule),
    },
    { path: '**', redirectTo: '' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })],
    exports: [RouterModule],
})
export class AppRoutingModule {}

And then, with some kind of sorcery, I end up with a NavigationModule imported in the AppModule with some configs passed to the forRoot() method of the NavigationModule so I can set the routes for this projects.

So my basic idea is, that I have a navigation module with dynamic child routes which get configured through some mechanism. I mean obviously I can't just statically provide all child routes in the NavigationRoutingModule. That just would defeat the purpose of the modularity.

Is something like this possible or am I just overthinking it and my current solution is already good?

Dynamic adding child routes to lazy loaded module in Angular 11

0 Answers