Angular 2 nested module with own routes

Question

Angular 2 nested module with own routes

I have an Angular 2 project that has 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 .

In dashboard.module.ts I have a main route app. On dashboard.component.html I have <router-outlet></router-outlet>

On this router-out I create my adminarea.component.html

Everything works well here. If I put on my browser: http://localhost:3000/adminarea

is displayed.

But I need other subfolders with different functions (list of users, list of parameters ...) to be added to the adminarea folder. So I create adminarea.module.ts and adminarea.routes.ts to manage the routes of these child components in adminarea.component.html . Here I put a new one<router-outlet name="adminarea"><router-outlet>

If I put it in my browser http: // localhost: 3000 / adminarea / usermanagement , then it started a lot of errors.

Here's a screenshot of the error:

Here are 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 {}