Angular 路由器：加载模块作为延迟加载模块的子模块

Question

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

例如我想要以下路径：

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

我的应用程序-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,
  },
];

正如我目前所做的那样，我得到了 "resource not found"。

例如我不想有以下路线：

https://localhost:8080/ui/示例模块/新

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

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

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

Answer 1

我认为您需要从 ExampleModule

中加载 NewModule

因此，从应用模块路由中删除您的 new 路径，并将此位添加到 ExampleModule 的路由

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
          },
        ],
      },
  ...

Angular 路由器：加载模块作为延迟加载模块的子模块

Angular Router: Load module as child of lazy loaded modules

lazy-loading

angular-routing

angular-module

angular

angular-router