将子路由动态添加到 Angular 11 中的延迟加载模块

如何解决将子路由动态添加到 Angular 11 中的延迟加载模块

我正在为我的雇主开发一种模块化的框架。这样我们的客户就可以说出他们想要的功能。所以我把所有的东西都放在库中，并为每个都添加了一个路由模块。 图书馆之一是导航。它包含一个带有侧边栏和工具栏的组件，以及用于其子项的 <router-outlet></router-outlet>。

所以目前我的 AppRoutingModule 看起来像这样：

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

所以基本上我将空路由设置为带有 NavigationComponent 的我的 AuthGuard 并将其子项设置为来自其他库的延迟加载模块。

我现在的想法是在我的导航库中添加一个 NavigationRoutingModule

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: '',children: [],];

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

并将 AppRoutingModule 简化为如下所示：

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

const routes: Routes = [
    {
        path: '',loadChildren: () => import('@company/navigation').then((m) => m.NavigationModule),})
export class AppRoutingModule {}

然后，通过某种魔法，我最终在 NavigationModule 中导入了一个 AppModule，并将一些配置传递给 forRoot() 的 NavigationModule 方法，所以我可以为这个项目设置路线。

所以我的基本想法是，我有一个带有动态子路由的导航模块，这些路由通过某种机制进行配置。我的意思是显然我不能只是静态地提供 NavigationRoutingModule 中的所有子路由。那只会违背模块化的目的。

这样的事情是可能的还是我想多了而我目前的解决方案已经很好了？