时间戳

首页 > 解决方案 > Angular Router：将模块加载为延迟加载模块的子模块

angular - Angular Router：将模块加载为延迟加载模块的子模块

问题描述

我有一个复杂的应用程序，我想在其中加载一个模块作为延迟加载模块的子模块。

例如，我想要以下路径：

https://localhost:8080/ui/ examplemodule / new

examplemodule和new都是一个模块，每个都有自己的 routing.config 文件。

我的 app-routing.module.ts 看起来像这样：

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    canActivate: [LoginRequiredGuard],
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            component: HomeComponent,
          },
          {
            path: 'examplemodule',
            loadChildren: 'app/my-modules/example/example.module#ExampleModule',
            canActivate: [LoginRequiredGuard],
          },
          {
            // examplemodule2
          },
          {
            // examplemodule3
          },
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            canActivate: [LoginRequiredGuard],
          },
        ],
      },
      ...

NewModule 的 new.routing.ts 文件如下所示：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'new',
    pathMatch: 'full'
  },
  {
    path: 'new',
    component: NewViewComponent,
  },
];

正如我目前所做的那样，我得到一个“找不到资源”。

例如我不想有以下路线：

https://localhost:8080/ui/ examplemodule / new

https://localhost:8080/ui/ examplemodule2 / new

https://localhost:8080/ui/ examplemodule3 / new

我究竟做错了什么？我希望我能解释清楚..

标签： angularlazy-loadingangular-routingangular-routerangular-module

解决方案

我认为您需要NewModule从内部加载ExampleModule

因此，从 app 模块路由中删除您的new路径并将此位添加到ExampleModule's routing

const routes: Routes = [
{
    path: '',
    component: YourParentComponentForExampleModule,
    children: [
      {
        path: '',
        children: [
          //All your other paths here
          //...
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            //canActivate: [LoginRequiredGuard], //You probably don't need it as it's already there on parent module
          },
        ],
      },
  ...

推荐阅读