Angular Router：將模塊作為延遲加載模塊的子級加載

Question

我有一個復雜的應用程序，我想在其中加載模塊作為延遲加載模塊的子級。

例如，我想要以下路徑：

https：// localhost：8080 / ui / examplemodule / 新

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 / 新

https：// localhost：8080 / ui / examplemodule2 / 新

https：// localhost：8080 / ui / examplemodule3 / 新

我究竟做錯了什么？ 我希望我可以理解它。

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