角度2モジュール遅延ロードが動作しない

Question

2つのセクション、ウェルカムとバックエンドを持つサイトの基本的な構造を構築して、モジュールの角度2（RC5）遅延ロードを回避しようとしています（ログインページとメインサイト）。私はフィーチャー・モジュールのAngular 2文書に続いて、ウェルカム・セクション用とバックエンド用の2つのドキュメントを設定しました。これは、ウェルカムコンポーネントに正しくデフォルト設定されていますが、「バックエンド」ルートにリンクするはずのウェルカムコンポーネントのボタンは、代わりに「ウェルカム/バックエンド」になります。ちょうど/バックエンドでURLに入力すると、/ backend/welcomeに行きます。ここでは、とにかく

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

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

plunkです：

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ここに私のapp.routing.tsファイルですアプリ全体のほうが簡単にPlunkrになります。重要なものは、歓迎とバックエンドのフォルダにあります。 「ログイン」をクリックすると、「ログアウト」ボタンが表示された「バックエンド」が表示され、「ようこそ」ページに戻ります。

何か提案がありがとうございます。

Answer 1

私は最終的にルータがネストされたルートをスタックするモジュール（例： 'backend'ルートのapp.routingでは 'backend'、urlでは '/ backend/backend'になります）。そのため、解決策は、{path： ''、component：BackendComponent}という単一ルートでバックエンドルートを設定することでした。 routerLinkの値に/を追加することも必要でした（バックエンドの代わりに/ backendなど）。

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

ここに私の最後のbackend.routing.tsです

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

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

ログインボタンのタキng/backendにログアウトボタンを押して、/期待どおりに歓迎します。あなたのバックエンドに必要なリンクは次のとおりです：Plunker

Answer 2

plunkrにはかなりの問題がありました。ここでhttps://plnkr.co/edit/QciaI8?p=preview

ルータリンクはあなたがまた

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が変更された

にbackend.routing.tsが必要

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

をapp.componentするために移動された実施例であります

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