角度遅延ロードルーティングは常にワイルドカードモジュールに行きます

Question

私は、複数のモジュールを持つ新しいAngularアプリケーションを開発中です。私はまだルーティングを正しくするのに苦労しています。次の（簡略化された）例では、StoreModuleを遅延ロードしたいとします。 URLが指定されていない場合は、私のアプリケーションで/storeにリダイレクトされます。無効なURLが指定されている場合、NotFoundComponentが表示されます。ただし、現在の設定では、URLに関係なく、常にNotFoundComponentが表示されます。あなたは私が間違っていることを見ていますか？

これは、私はURLのマッチが行われないことができる場合にのみNotFoundModuleで提供RouterModuleを使用することを期待する私のapp.module.tsファイルです。

app.module.ts

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AuthModule, 
    RouterModule.forRoot([ 
     { path: '', redirectTo: 'store', pathMatch: 'full'}, 
     { path: 'store', loadChildren: 'app/store/store.module#StoreModule'}, 
     { path: 'login', component: LoginComponent }, 
    ]), 
    LoginModule, 
    NotfoundModule, 
    ], 
    bootstrap: [AppComponent], 
    exports: [RouterModule] 
}) 
export class AppModule { } 

これが私のStoreModuleです。私がapp.module.tsモジュールのNotFoundModuleをコメントアウトすると、これはすべて期待どおりに動作します。

store.module.ts

@NgModule({ 
    imports: [ 
    AuthModule, 
    CommonModule, 
    SharedModule, 
    RouterModule.forChild([ 
     { path: '', pathMatch: 'full', redirectTo: 'dashboard' }, 
     { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, 
    ]), 
    ], 
    declarations: [StoreTemplateComponent, DashboardComponent] 
}) 
export class StoreModule { } 

notfound.module.ts

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { 
     path: '**', 
     component: NotfoundComponent 
     } 
    ]) 
    ], 
    declarations: [ NotfoundComponent ], 
}) 
export class NotfoundModule { } 

Answer 1

ルーターの設定がOKになります。見て一つのことは、あなたが をリダイレクトする必要があります「ダッシュボード」でAuthGuardを持っているし、URLをリダイレクトすることは間違っていなければならないこと、 はそうあなたがNotFoundComponentにリダイレクトされ です。

これがあなたの問題を解決することを願っています。 URLが指定されていない場合

Answer 2

、私は自分のアプリケーションが/ストアにリダイレクトしたいです。無効なURLが指定されている場合は、NotFoundComponentを表示します。

これが必要な場合は、notfound.module.tsを削除する必要があります。または、あなたがあなたのルートにそれをロードしていない現在の設定でそれを遅延ロードする必要があります、それは前にロードされ、ワイルドカードとしてすべてのルートを扱うアプリケーションモジュールでそれを追加することによって。

NotfoundComponentを使用して、既存のルートに追加することができます。

RouterModule.forRoot([ 
    { path: '', redirectTo: 'store', pathMatch: 'full'}, 
    { path: 'store', loadChildren: 'app/store/store.module#StoreModule'}, 
    { path: 'login', component: LoginComponent }, 
    { path: '**', component: NotfoundComponent } // this should work 
]),