Angular 2 模块延迟加载不起作用

Question

我试图通过构建一个包含两个部分的网站基本结构来了解 Angular 2 (RC5) 模块的延迟加载（想想登录页面和主网站）。我已经按照有关功能模块的 Angular 2 文档进行了设置，其中一个用于欢迎部分，另一个用于后端。它正确地默认为欢迎组件，但我在欢迎组件中应该链接到“后端”路由的按钮改为“欢迎/后端”。仅输入 /backend 的 url 会转到 /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

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

路由器链接已移至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 { }

后端.组件.ts

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

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

这导致登录按钮将我带到 /backend，注销按钮将我带到 /welcome，正如预期的那样。这是该 plunk 的链接：Plunker