Question

我正在尝试使用延迟加载来为我的应用程序工作，但这是一个接一个的问题。我已经获得了延迟加载的主要路由/admin，现在我想添加另一条路由/admin/login。

所以我这样做了：

管理-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

从我之前给你的回复看我的回购：https://stackoverflow.com/a/40121008/146656

在我的示例中，它是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
  }
];

然后我在<router-outlet>的主要组件视图中添加了/lazy，以便/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，则需要重新启动它才能使其正常运行。

请参阅https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

中deep-lazy-loading分支的完整示例

Answer 2

您需要在LoginModule中定义一个空路径。

<强> login.module.ts

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

export class LoginModule {}

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

2 个答案: