3

私は私のアプリでは、以下のルーティングの設定があります。ルーティング&モジュール

app.module.ts 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    AppRouting, 

    // Feature Modules 
    CoreModule, 
    AuthModule, 
    AdminModule, 
    SharedModule 
    ], 
    bootstrap: [AppComponent] 
}) 

app.routing.ts 

const routes: Routes = [ 
    { path: '', redirectTo: 'admin', pathMatch: 'full' }, 
    { path: 'admin', loadChildren:() => AdminModule } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules}) 
    ], 
    exports: [RouterModule] 
}) 

admin.module.ts

@NgModule({ 
    declarations: [ 
    AdminComponent 
    ], 

    imports: [ 
    CommonModule, 
    FormsModule, 
    UserModule, 

    AdminRouting, 
    SharedModule 
    ], 

    providers: [ 
    UserService 
    ] 
}) 

admin.routing.ts 

const routes: Routes = [ 
    { path: '', component: AdminComponent, canActivate: [AuthGuard], children: [ 
    { path: 'users', loadChildren:() => UserModule } 
    ]} 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(routes) 
    ], 
    exports: [RouterModule] 
}) 

user.module.ts 

@NgModule({ 
    declarations: [ 
    UserComponent, 
    UserManageComponent, 
    UserListComponent 
    ], 

    imports: [ 
    CommonModule, 
    FormsModule, 

    UserRouting, 
    SharedModule 
    ] 
}) 

user.routing.ts 

const routes: Routes = [ 
    { path: '', component: UserComponent, children: [ 
    { path: '', component: UserListComponent }, 
    { path: 'new', component: UserManageComponent }, 
    { path: ':id/edit', component: UserManageComponent } 
    ]}, 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(routes) 
    ], 
    exports: [RouterModule] 
}) 

をして、問題があります:

私は自分のアプリケーションのルーティングを期待したものする:

/users => not a valid route 
/users/new => not a valid route 

/admin/users => valid route 
/admin/users/new => valid route 
/admin => valid route (should render AdminComponent) 

なぜか分かりませんが、私が/ usersを入力すると、アプリケーションはUserComponentをレンダリングしますが、私が望む動作ではありません。

私はUserComponentに/ admin/usersからのみアクセスしたいと思います。

誰も私の理由を説明できますか?

+0

あなたが管理者にすべてリダイレクトしているので: '{パス: ''、redirectTo: '管理者'、pathMatch: 'フル'}' – jonrsharpe

+0

問題ではありません。このパスを削除しても、アプリケーションは期待どおりに動作しません。 /ユーザーは使用できないはずですが、/ admin/usersは使用できません。 –

+0

[style guide](https://angular.io/guide/styleguide#style-02-12)からのボーナス:* RoutingModuleのファイル名を '-routing.module.ts' *で終了します(CLIはあなたのためにこれを行う) – Leo

答えて

1

AppRoutingのインポートをインポートの最後に移動しようとしましたか?here

1

することは、これは見てみてください:

admin.routing.ts 

const routes: Routes = [ 
    { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], 
     children: [{ path: 'users', loadChildren:() => UserModule }]} 
]; 
関連する問題