Angular 2 如何定义也是延迟加载的父路由的延迟加载子路由

Question

我正在尝试让延迟加载适用于我的应用程序，但这是一个接一个的问题。我已经得到延迟加载的主要路径 /admin，现在我想添加另一条路径 /admin/login。

所以我这样做了：

admin-router.module.ts

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: AdminAreaComponent,
        children: [
          {
            path: 'login',
            loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    AdminAreaComponent
  ]
})
export class AdminAreaRouterModule {}

登录-router.module.ts

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

// Global modules
import {ComponentsModule, SharedModule} from '../../shared';

// Components
import {LoginComponent} from '../login.component';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ])
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginRouterModule {}

login.module.ts

import {NgModule} from '@angular/core';

import {ComponentsModule, SharedModule} from '../../../shared';
import {LoginComponent} from './login.component';
import {LoginRouterModule} from './router';

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ],
  exports: [
    ComponentsModule,
    SharedModule,
    LoginRouterModule
  ]
})

export class LoginModule {}

但问题是，一旦我添加 children 部分，/admin 就会停止一起工作，并抛出错误 Cannot match any routes. URL Segment: 'admin'.

这不是你定义延迟加载路由的子路由的方式吗？我该如何解决？

Answer 1

您需要在登录模块中定义一个空路由。

login.module.ts

@NgModule({
  imports: [
    RouterModule.forChild({ path: '', component: LoginComponent })
    ComponentsModule,
    SharedModule
  ],
  exports: [
    ComponentsModule,
    SharedModule
  ],
  declarations: [
    LoginComponent
  ]
})

export class LoginModule {}

Answer 2

查看我之前对您的回答中的回购协议：

在我的示例中，它是 lazy/deep，与您匹配 admin/login。

首先，我运行ng g module lazy/Deep --routing

然后，在src/app/lazy/deep/deep-routing.module.ts里面，我修改routes为：

export const routes: Routes = [
  {
    path: '',
    component: DeepComponent
  }
];

然后我在/lazy中的主要组件的视图中添加了一个<router-outlet>，以便/lazy/deep中的内容可以在其中呈现。

重要的是我如何修改 lazy-routing.module.ts 的路由，以允许延迟加载 lazy/deep 路由：

export const routes: Routes = [
  {
    path: '',
    component: LazyComponent
  },
  {
    path: 'deep',
    // Loading by relative path didn't seem to work here
    // loadChildren: './deep/deep.module#DeepModule'
    loadChildren: 'app/lazy/deep/deep.module#DeepModule'
  }
];

如果您是运行 ng watch / npm start 或 ng build --watch，则需要重新启动它才能正常工作。

请参阅 deep-lazy-loading b运行ch 中的完整示例 https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

Angular 2 如何定义也是延迟加载的父路由的延迟加载子路由

Angular 2 how to define lazy loaded child routes of a parent route that's also lazy loaded

lazy-loading

typescript

angular2-routing

angular