问题
I have a project on Angular 2 that have this structure:
++ /
--- app.module.ts
+++ dashboard
---- dashboard.module.ts
---- dashboard.routes.ts
++++ adminarea
----- adminarea.module.ts
----- adminarea.routes.ts
++++++ user
------- usermanagement.component.html
------- usermanagement.component.ts
++++ home
++++ user
So, on my app.module.ts i import dashboard.module.ts.
On dashboard.module.ts i have the main route app.
On dashboard.component.html i have <router-outlet></router-outlet>
On this router-outlet i render my adminarea.component.html
Everything is working good here. If i put on my browser: http://localhost:3000/adminarea
then is render.
But, i need that into adminarea folder another sub folders with other features (list users, list of options...). So i create adminarea.module.ts and adminarea.routes.ts for manage the routes of these children components into adminarea.component.html. Here i put a new <router-outlet name="adminarea"><router-outlet>
If i put here on my browser http://localhost:3000/adminarea/usermanagement trows a many errors.
Here is a screenshot with the error:
Here is my files:
dashboard.routes.ts
import { Route } from '@angular/router';
... many imports
import { AdminareaModule } from './adminarea/adminarea.module';
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'user', component: UserComponent, canActivate: [AuthGuard] },
{ path: 'adminarea', canActivate: [AuthGuard], loadChildren: () => AdminareaModule },
{ path: '**', component: DashboardComponent }
]
export const MODULE_COMPONENTS = [
HomeComponent,
UserComponent,
...
]
adminarea.routes.ts
import { Route } from '@angular/router';
import { UserManagementComponent } from './user-management/user-management.component'
import { AdminareaComponent } from "./adminarea.component";
export const MODULE_ADMINAREA_ROUTES: Route[] =[
{path: '', component: AdminareaComponent,
children:[
{
path: 'usermanagement', component: UserManagementComponent, outlet: 'adminarea'
}]
},
]
adminarea.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import {UserManagementComponent} from './user-management/user-management.component';
import {AdminareaComponent} from './adminarea.component';
import {MODULE_ADMINAREA_ROUTES} from './adminarea-routes';
@NgModule({
imports: [
RouterModule.forChild(MODULE_ADMINAREA_ROUTES)
],
declarations : [
UserManagementComponent,
AdminareaComponent
],
providers : [
],
exports: [RouterModule]
})
export class AdminareaModule {}
Can you help me please? Thanks a lot.
来源:https://stackoverflow.com/questions/43553844/angular-2-nested-module-with-own-routes