Angular Routing 无法在具有多个应用程序的项目中找到 Lazy-Loaded 子路由

问：

项目结构：

我有一个项目，其中 4 个不同的应用程序包装在一个文件夹中，结构如下：

apps
|
|+-- dashboard
|     |+-- app.module.ts
|     |
|     |+-- app.routes.ts
|     |
|     |+-- *folders containing other various components to route to*
|
|+-- dev
|     |+-- dev.module.ts
|     |
|     |+-- dev.routes.ts
|     |
|     |+-- *folders containing other various components to route to*
|
|+-- kitchen
|     |+-- kitchen.module.ts
|     |
|     |+-- kitchen.routes.ts
|     |
|     |+-- *folders containing other various components to route to*
|
|+-- support
|     |+-- support.module.ts
|     |
|     |+-- support.routes.ts
|     |
|     |+-- *folders containing other various components to route to*
+

这个问题与我在 StackOverflow 上看到的其他帖子的主要区别在于，没有包含所有路由的包装器，所有应用程序都是独立的。当我想运行所有应用程序时，我运行 npm 命令：
.
这是有意为之的，因为我们对每个应用程序都有不同的侧边栏/权限/等。nx run-many --target=build --projects=dashboard,support,kitchen,dev --watch --skip-nx-cache

主要问题：

如果我在主应用程序页面，仪表板组件上，我可以路由到“/developer”。但是，例如，如果我尝试路由到“/developer/server-stats”，则无法找到该路由。

如果我在“/developer”之外的开发人员页面上，例如“developer/server-stats”并且页面重新加载，则无法找到路由。

如果尝试搜索除“/developer”之外的开发者页面，例如“developer/server-stats”，并且页面重新加载，则无法找到路由。

一个非常重要的细节：

需要注意的是，这适用于我们的生产和暂存版本。这意味着可能有某种方式来构建/加载路由，这些方法会根据某些配置设置而有所不同，并且我很可能需要在那里调整一些东西。

文件详细信息：

为了简单起见，我将只展示 App 和 Dev 的模块，以减少显示的数量。修复程序还应：

应用模块：

@NgModule({
    declarations: [
        AppComponent
    ],
    providers: [
        EventService,
        AnchorService,
        OrganizationService,
        LandingPageResolver,
        { provide: APP_BASE_HREF, useValue: '/' }
    ],
    imports: [
        CoreModule,
        BreadcrumbsModule,
        AppRoutingModule,
                // Loaded after AppRoutingModule so that we don't route to not-found on accident
        WildCardRoutingModule 
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule { }

开发模块：

@NgModule({
    declarations: [
        DevComponent
    ],
    imports: [
        CoreModule,
        DevRoutingModule,
        WildCardRoutingModule, // <--- needs to be imported AFTER DevRoutingModule
    ],
    providers: [ChannelResource, ChannelService, ProbeUpdateService, ProbeUpdateResource, EnvironmentService, { provide: APP_BASE_HREF, useValue: '/' }],
    bootstrap: [DevComponent]
})

export class DevModule { }

应用路由：

export const DashboardRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: '/dashboard' },
    {
        /**
         * To make dashboard and its children load in the same router-outlet
         * we need to set path as dashboard on this base route and add the actual dashboard route in the children
         */
        path: 'dashboard',
        canActivateChild: [AuthGuard],
        data: {
            label: 'Dashboard',
            appBase: true
        },
        children: [
            // this is a child so we can load the component in same router-outlet
            {
                path: '',
                loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
                data: {
                    authorizedRoles: ['member', 'support'],
                    label: 'Dashboard',
                },
            },
            {
                path: 'insight',
                loadChildren: () => import('./insight-manager/insight-manager.module').then(m => m.InsightManagerModule),
                data: {
                    authorizedRoles: ['member', 'support']
                }
            }
        ]
    }
];

@NgModule({
    imports: [ RouterModule.forChild(DashboardRoutes) ],
    providers: [ AuthGuard, TourCanDeactivateGuard, TourResolver, TimespanResolver],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

开发路由：

export const DeveloperRoutes: Route = {
    path: 'developer',
    data: {
        label: 'Developer',
        appBase: true,
        authorizedRoles: ['developer']
    },
    children: [
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'server-stats'
        },
        {
            path: 'server-stats',
            loadChildren: () => import('./server-stats/server-stats.module').then(m => m.ServerStatsModule),
            data: { label: 'Server Stats', authorizedRoles: ['developer'] }
        },
        {
            path: 'member-management',
            loadChildren: () => import('./member-management/member-management.module').then(m => m.MemberManagementModule),
            data: { label: 'Member Management', authorizedRoles: ['developer'] }
        }
    ],
};

我尝试并记录的更改：

应用组件

• 更改：为“/developer/server-stats”添加了侧边栏路由
• 目的：测试到“/developer”以外的内容的路由总是会中断，而不仅仅是在使用搜索栏/其他链接时。
• 结果：正如预期的那样，路由失败，因为我们正在路由到“/developer”以外的内容

关于此组件的说明： 适合测试新路线，但这里可能不需要任何内容来修复。

应用模块：

• 更改：将 DevRoutingModule 添加到导入中。
• 目的：测试确保在加载应用时定义所有开发人员路由的结果。
• 结果：路由到所有开发人员页面都有效，但是是在仪表板应用程序（应用程序组件）而不是开发人员应用程序（dev-component）中完成的，这导致侧边栏关闭，并且只是一个整体不正确的修复。

关于此组件的说明： 修复似乎不太可能添加到应用程序模块端口。我们需要在仪表板上定义开发人员路由，但在此处添加它会导致在尝试在仪表板应用程序之外路由时停留在仪表板应用程序上。

应用路由

• 更改：将 DashboardRoutes 更改为包含 ....DeveloperRoutes
• 目的：测试确保在加载应用时定义所有开发人员路由的结果。
• 结果：路由到所有开发人员页面都有效，但是是在仪表板应用程序（应用程序组件）而不是开发人员应用程序（dev-component）中完成的，这导致侧边栏关闭，并且只是一个整体不正确的修复。

• 更改：更改了 DashboardRoutes 以包含“developer”的路径。 { path： 'developer'， 数据：{ 标签： '开发者'， appBase：真， authorizedRoles： ['开发者'] }, loadChildren： （） => import（'{此处的相应路径}'）.then（m => m.DeveloperRoutes）， // 也尝试过 DevModule 和 DevRoutingModule }
• 目的：尝试为每个开发人员路由设置一个定义，该路由将重定向到开发人员版本。
• 结果：找不到各种错误，包括重新定义的模块和路由。

关于此组件的说明： 修复似乎不太可能添加到 DashboardRoutes。我们需要在仪表板上定义的路由，但在此处添加它会导致在尝试在仪表板外部路由时停留在仪表板应用程序上。

侧边栏路由组件

• 更改：将 routerLinkActiveOptions.exact 设置为 false 而不是 true。
• 目的：尝试查看路由是否在“/dashboard”下的某处定义，但无法访问，因为它正在搜索确切的链接。
• 结果：仍未找到路由。

• 更改：从链接中删除 [interAppLink]
• 目的：测试 [interAppLink] 是否必要，并在侧边栏路由组件上工作。
• 结果：interApp 路由中断（interAppLink 是必需的且正常工作）。

关于此组件的说明： 这些路由似乎工作正常，当它们具有可以访问的路由时，它们能够正确路由到该路由。无论它是否在不同的应用程序中。修复可能不在这里。

开发路由

• 更改：尝试向 DeveloperRoutes 添加 loadChildren 值
• 目的：查看在加载开发路由模块时需要加载子模块时，是否可以稍后加载子模块。
• 结果：如果要定义静态子数组，则不能有 loadChildren。
• 附注事项： 可以通过创建包装当前 DevRoutingModule 的 DevAppRoutingModule 来进一步研究这一点，以便我们的实现可以更好地匹配 AppRouting 模块。

• 更改：将 DeveloperRoutes 更改为具有路由，{ path： ''， pathMatch： 'full'， redirectTo： '/developer' }。
• 目的：测试是否有某种方式我们路由到“”，重新路由到“/dashboard”，然后找不到子项。
• 结果：一切都是一样的，而不是修复。

• 更改：appBase： true 到 DeveloperRoutes 中的数据
• 目的：测试“/developer”是否只是被定义为路由而不是 appBase，导致无法正确找到子项
• 结果：没有修复，但感觉它仍然应该在这里设置，因为应用程序路由正在这样做，而且它似乎很直观，值得更多研究。

关于此组件的说明： 这里绝对有可能还有更多值得探索的地方。这就是我们正在寻找的许多路由的创建位置，由于某种原因，应用程序无法访问它，并且 interLinkApp 无法正确找到它们，因此它路由到 W

通配符路由

• 更改：删除了通配符路径 （'**'）
• 用途：确定开发人员路由是否被通配符路由覆盖。
• 结果：路由到“developer/server-stats”导致无法找到路径，导致控制台错误，只能路由到 localhost

关于此组件的说明： 几乎可以肯定，这里不需要为修复而进行任何更改。