Angular 2 模块延迟加载不工作

Question

我正在努力解决 Angular 2 (RC5) 延迟加载模块的问题，方法是构建一个包含两个部分的站点基本结构，欢迎和后端（想想登录页面和主站点） ).我已经按照 Angular 2 个关于功能模块的文档进行设置，一个用于欢迎部分，一个用于后端。它正确地默认为欢迎组件，但我在欢迎组件中的按钮应该 link 到 'backend' 路由改为 'welcome/backend'。在 url 中输入 /backend 会转到 /backend/welcome。这是我的 app.routing.ts 文件：

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

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full'},
  { path: 'backend', loadChildren: 'app/backend/backend.module' }
];

export const routing = RouterModule.forRoot(routes);

还有我的welcome.routing.ts：

import { RouterModule }  from '@angular/router';

import { WelcomeComponent } from './welcome.component';

export const routing = RouterModule.forChild([
    { path: 'welcome', component: WelcomeComponent}
]);

还有我的welcome.component.ts：

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

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

无论如何，这里是整个应用程序的插件，以使其更容易 Plunkr。重要的是欢迎和后端文件夹。单击“登录”应该会显示带有“注销”按钮的后端，这会将您带回到欢迎页面。

如有任何建议，我们将不胜感激。

Answer 1

你的 plunkr 有很多问题。这是工作示例 https://plnkr.co/edit/QciaI8?p=preview

路由器 link 已移至 app.component

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

@Component({
    selector: 'my-app',
    template: `
        <h1>Module Test</h1>
        <nav><a routerLink="../backend">Logins</a></nav>
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }

你还需要backend.routing.ts

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

import { BackendComponent }    from './backend.component';

const routes: Routes = [
  { path: '', redirectTo: 'backend', pathMatch: 'full'},
  { path: 'backend',    component: BackendComponent }
];

export const routing = RouterModule.forChild(routes);

Backend.module 已更改为

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BackendComponent }  from './backend.component';
import { routing }            from './backend.routing';

@NgModule({
    imports:      [  routing ],
  declarations: [ BackendComponent ]
})
export default class BackendModule { }

Answer 2

我最终通过弄清楚路由器从嵌套模块中堆叠路由（例如 app.routing 中的 'backend' 路由和 backend.routing 中的 'backend' 导致 '/backend/backend' 作为 url)。所以解决方案是让 backend.routing.ts 有一个路由 { path: '', component: BackendComponent }。还需要将 / 添加到 routerLink 值（例如 /backend 而不是 backend）。这是我最后的 backend.routing.ts:

import { Routes, RouterModule }  from '@angular/router';
import { BackendComponent }    from './backend.component';

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

export const routing = RouterModule.forChild(routes);

和backend.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BackendComponent } from './backend.component';
import { routing } from './backend.routing';

@NgModule({
    imports: [ routing ],
    declarations: [ BackendComponent ]
})
export default class BackendModule { }

welcome.component.ts:

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

@Component({
    template: `
        <h2>Welcome</h2>
        <nav><a routerLink="backend">Login</a></nav>
    `
})
export class WelcomeComponent { }

backend.component.ts

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

@Component({
    template: `
        <h2>Backend</h2>
        <nav><a routerLink="welcome">Logout</a></nav>
    `
})
export class BackendComponent { }

这导致登录按钮将我带到 /backend，而注销按钮将我带到 /welcome，正如预期的那样。这是一个 link 的小插曲：Plunker

Angular 2 模块延迟加载不工作

Angular 2 module lazy-loading not working

angularjs

angular

lazy-loading

angular2-routing

angular-module