Angular 2 nested module with own routes

家住魔仙堡 提交于 2019-12-25 16:53:39

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!