Angularjs 角度2模块延迟加载不工作

我试图通过构建一个包含两个部分的站点的基本结构来解决Angular 2 RC5模块的延迟加载问题，这两个部分分别是：欢迎和后端登录页面和主站点。我已经在特性模块上的Angular 2个文档之后进行了设置，一个用于欢迎部分，另一个用于后端。它正确地默认为欢迎组件，但应该链接到“后端”路由的欢迎组件中的我的按钮改为“欢迎/后端”。使用just/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}
]);

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

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

export const routing = RouterModule.forChild(routes);

还有我的welcome.component.ts：

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

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

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

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

不管怎样，这里是整个应用程序的一部分，让它更简单。重要的是在欢迎和后端文件夹中。单击Login应该会显示带有注销按钮的后端，该按钮会将您带回欢迎页面

---

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

您的plunkr有很多问题。下面是一个工作示例

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

---

你的枪有很多毛病。下面是一个工作示例

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

---

最后，我通过计算路由器堆叠来自嵌套模块的路由，例如app.routing中的“backend”路由和backend.routing中的“backend”路由将“/backend/backend”作为url。因此，解决方案是让backend.routing.ts具有单个路由{path:，component:BackendComponent}。还需要将/添加到routerLink值，例如/backend而不是backend。这是我的最后一个backend.routing.ts：

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

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

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

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 { }

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。这里有一个指向plunk的链接：

我最终通过计算路由器堆叠来自嵌套模块的路由，例如app.routing中的“backend”路由和backend.routing中的“backend”。路由结果是“/backend/backend”作为url。因此，解决方案是让backend.routing.ts具有单个路由{path:，component:BackendComponent}。还需要将/添加到routerLink值，例如/backend而不是backend。这是我的最后一个backend.routing.ts：

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

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

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

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 { }

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。这里有一个指向plunk的链接：

您不需要backend.route.ts，然后再路由到backend.component.ts吗？您的示例看起来不像angular 2的延迟加载示例@crh225他们的用例有点不同。他们在app.component中有一个导航，用于导航到所有路线。我需要从一个功能模块内链接到另一个功能模块。这是我困惑的一部分。是的，修复的一部分是添加backend.route.ts。您可以在下面的我的解决方案中看到所有代码。您不需要backend.route.ts然后路由到backend.component.ts吗？您的示例看起来不像angular 2的延迟加载示例@crh225他们的用例有点不同。他们在app.component中有一个导航，用于导航到所有路线。我需要从一个功能模块内链接到另一个功能模块。这是我困惑的一部分。是的，修复的一部分是添加backend.route.ts。您可以在下面的我的解决方案中看到所有代码。谢谢您的信息crh225。不幸的是，将登录按钮移动到app.component.ts不符合我的要求，后端的路由结果很滑稽。您的代码确实引导我找到了正确的解决方案，我将其添加为答案。关键是在backend.routing中有一个路径为空的路由。{path:，component:BackendComponent}路由器似乎在模块之间堆叠路由，例如app.routing中的'backend'路由和backend.routing中的'backend'路由将'/backend/backend'作为url。感谢您提供的信息crh225。不幸的是，将登录按钮移动到app.component.ts不符合我的要求，后端的路由结果很滑稽。您的代码确实引导我找到了正确的解决方案，我将其添加为答案。关键是在backend.routing中有一个路径为空的路由。{path:，component:BackendComponent}路由器似乎在模块之间堆叠路由，例如app.routing中的'backend'路由和backend中的'backend'。路由结果是'/backend/backend'作为url。你能链接到plunker吗，10xSure的东西，我现在添加了它。你能链接到plunker吗，10xSure的东西，我现在添加了它。