私は状況を再現できましたが、まず動作するコードを教えてください。単純化のために、すべてを1つのファイルに入れました。リファクタリングそれ自身のモジュールへの角度ルータは意図した通りに動作しません
このコードは意図的に機能します。 「First」をクリックするとFirstComponentが表示され、SecondComponentをSecondComponentにリファクタリングしても、SecondComponentにはSecondモジュールがあり、SecondモジュールはSecondModuleモジュールになっていてもすべて動作します。
import '../polyfills';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<nav>
<a routerLink="/first">First</a>
<a routerLink="/second">Second</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent { }
@Component({
template: `FirstComponent`
})
export class FirstComponent { }
@Component({
template: `SecondComponent`
})
export class SecondComponent { }
@Component({
template: `PageNotFoundComponent`
})
export class PageNotFoundComponent { }
const secondRoutes: Routes = [
{ path: 'second', component: SecondComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(secondRoutes)
],
declarations: [
SecondComponent,
]
})
export class SecondModule { }
const appRoutes: Routes = [
{ path: 'first', component: FirstComponent },
{ path: '', redirectTo: '/first', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
SecondModule
],
declarations: [
AppComponent,
FirstComponent,
PageNotFoundComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
しかし、今、私は少しさらに行くと、公式ページにadvicedとしてそれ自身のルータモジュールにメインルーティングをリファクタリングするとき、私は今、「第二」をクリックしたときに、私が行くので、それは、もはや機能しません。 SecondComponentではなくNotFoundComponentに渡します。私はここで見つけることができアンギュラルーティングの公式ガイド次られた
import '../polyfills';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<nav>
<a routerLink="/first">First</a>
<a routerLink="/second">Second</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent { }
@Component({
template: `FirstComponent`
})
export class FirstComponent { }
@Component({
template: `SecondComponent`
})
export class SecondComponent { }
@Component({
template: `PageNotFoundComponent`
})
export class PageNotFoundComponent { }
const secondRoutes: Routes = [
{ path: 'second', component: SecondComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(secondRoutes)
],
declarations: [
SecondComponent,
]
})
export class SecondModule { }
const appRoutes: Routes = [
{ path: 'first', component: FirstComponent },
{ path: '', redirectTo: '/first', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
SecondModule
],
declarations: [
AppComponent,
FirstComponent,
PageNotFoundComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
：私はこの問題に遭遇したまでhttps://angular.io/docs/ts/latest/guide/router.html
マイルストーン3の最後に「私はそれを作った」と今私はここで立ち往生しています。
EDIT：
私は角2 plunkerにコードをアップロードしています。ここで
は、モジュールのリファクタリングのないコードです：ここではhttps://plnkr.co/edit/PlWvxDZGnA848OciyRQE?p=preview
は、モジュールのリファクタリングとコードです：https://plnkr.co/edit/eYeiI9dRTZP6BDL5KeVQ?p=preview
EDIT 2：私は、ワイルドカードを削除する場合、それは動作します：
{ path: '**', component: PageNotFoundComponent }
しかし、このワイルドカードをアプリルータモジュールの最下部に配置できない場合は、どこで定義しますか？