私のAngularアプリが有効なルートを無効であると認識しているのはなぜですか？

Question

私は2つの基本的な2つの基本的なNgModulesと、このアプリケーションでは、コア（ヘッダー、フッターとホームページ用）とauth基本的に認証のための1つをルーティングしています。 のアプリルートを完全にcomponentsの間で使用することはありません。無効なルーティングを導入すると、ロードする唯一のコンポーネントは家庭用です。 ヘッダーコンポーネントからルーティングします。つまり、routerLink="/signin" なぜこのようなことが起こっているのでしょうか？

次は私のコード、

CoreModule

@NgModule({ 
    declarations: [ 
     HeaderComponent, 
     FooterComponent, 
     SidenavLeftComponent, 
     HomeComponent 
    ], 
    imports: [ 
     CommonModule, 
     BrowserModule, 
     BrowserAnimationsModule, 
     MDBBootstrapModule.forRoot(), 
     MDBBootstrapModulePro.forRoot(), 
     NgbModule.forRoot(), 
     AppRoutingModule 
    ], 
    exports: [ 
     HeaderComponent, 
     FooterComponent, 
     SidenavLeftComponent, 
     HomeComponent, 
     AppRoutingModule 
     ], 
    schemas: [ NO_ERRORS_SCHEMA ] 
    }) 
    export class CoreModule { } 

AppRoutingModule

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home' , pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}}, 
    { path: '**', redirectTo: '/not-found', pathMatch: 'full'} 
]; 
@NgModule({ 
    imports: [ 
     RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules}) 
    ], 
    exports: [RouterModule] 
    }) 
    export class AppRoutingModule { 
    } 

AuthModule

です

@NgModule({ 
    declarations: [ 
    SigninFormComponent, 
    SignupRequestFormComponent, 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    BrowserModule, 
    BrowserAnimationsModule, 
    MDBBootstrapModule, 
    MDBBootstrapModulePro, 
    NgbModule, 
    AuthRoutingModule 
    ] 
}) 
export class AuthModule { } 

AuthRoutingModule

const authRoutes: Routes = [ 
{ path: 'signin', component: SigninFormComponent }, 
{ path: 'signup', component: SignupRequestFormComponent } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(authRoutes) 
    ], 
    exports: [RouterModule] 
}) 
export class AuthRoutingModule { } 

AppModule

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ErrorPageComponent, 
    NotFoundComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    FormsModule, 
    HttpModule, 
    CoreModule, 
    AuthModule, 
    AppRoutingModule 
    ], 
    providers: [ 
    MDBSpinningPreloader, 
    UserService, 
    ConfigService, 
    AuthGuard, 
    { provide: Http, useClass: AuthenticatedHttpService } 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { } 

Answer 1

AppModule

@NgModule({ 
    ..... 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    FormsModule, 
    HttpModule, 
    CoreModule, 
    AuthModule, 
    AppRoutingModule 
    ], 

あなたAppRoutingModuleがロードされるようにするには、まずCoreModuleをロードしています最初とすべての無効なルートと定義されていないルートは、あなたのwidlcard式にリダイレクトされています。

const appRoutes: Routes = [ 
     { path: '', redirectTo: 'home' , pathMatch: 'full' }, 
     { path: 'home', component: HomeComponent }, 
     { path: 'not-found', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}}, 
     { path: '**', redirectTo: '/not-found', pathMatch: 'full'} 
    ]; 

だから、AppModule宣言でCoreModule前AuthModuleをロードしたり、AppRoutingModuleからワイルドカード表現を削除し、AuthRoutingModule内に置く必要がありますどちらか。