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

问题描述

我正在尝试让延迟加载适合我的应用，但这是一个接一个的问题.我已经获得了延迟加载的主要路由/admin，现在我想添加另一条路由/admin/login.

I'm trying to get lazy loading to work for my app but it's one issue after another. I've gotten the main route to lazy load which is /admin, now I want to add another route which is /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 {}

login-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'.

The problem though is that as soon as I add the children part, /admin stops working all together, throwing the error Cannot match any routes. URL Segment: 'admin'.

这不是您如何定义延迟加载路由的子路由吗?我该如何解决?

Is this not how you define child routes of a lazy loaded route? How can I fix it?

推荐答案

从我之前给您的答复中查看我的回购协议: https: //stackoverflow.com/a/40121008/146656

Looking at my repo from my previous answer to you: https://stackoverflow.com/a/40121008/146656

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

In my sample it's lazy/deep, which matches admin/login for you.

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

然后，在src/app/lazy/deep/deep-routing.module.ts内部，我将routes修改为:

Then, inside src/app/lazy/deep/deep-routing.module.ts, I modified routes to:

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

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

Then I added a <router-outlet> to the view of the main component in /lazy, so that content from /lazy/deep can be rendered inside it.

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

The important piece is how I modified the routing for lazy-routing.module.ts, to allow for lazy-loading the lazy/deep route:

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，则需要重新启动它才能使其正常工作.

If you are running ng watch / npm start or ng build --watch, you'll need to restart that in order to make it work.

在 https中的deep-lazy-loading分支中查看完整示例. ://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

See the full example in deep-lazy-loading branch in https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

这篇关于Angular 2如何定义也延迟加载的父路由的延迟加载子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！