Angular 5 routing child routes

Question

I'm quite new to Angular, and I need help regarding routing. I have this setup.

app.component.html

<router-outlet name="nav"></router-outlet>
<router-outlet name="left-sidebar"></router-outlet>
<ui-workspace [push-workspace]="pushWorkspace$ | async">
    <router-outlet name=content></router-outlet>
</ui-workspace>
<router-outlet></router-outlet>

app.module.ts

import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { HomeRoutingModule } from './home-routing.module';
import { EffectsModule } from '@ngrx/effects';
import { effects } from './store';
import { CommonModule } from '@angular/common';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    EffectsModule.forFeature(effects),
    P365ControlsModule.forChild(),
    HomeRoutingModule
  ]
})
export class HomeModule {
}

app-routing.module.ts

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoadingComponent } from './components/loading/loading.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';

const routes: Routes = [
  {
    path: 'loading',
    component: LoadingComponent
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent
  },
  {
    path: '',
    redirectTo: '/welcome', pathMatch: 'full'
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

e-forms-list.component.html

<p>
  e-forms-list works!
</p>
<ui-button [routerLink]="['add','education']">Klikni za add e prijave...</ui-button>
<router-outlet></router-outlet>

e-forms.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { EFormsRoutingModule } from './e-forms-routing.module';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  imports: [
    CommonModule,
    EFormsRoutingModule,
    P365ControlsModule.forChild()
  ],
  declarations: [EFormsListComponent, EFormsEducationEditComponent]
})
export class EFormsModule { }

e-forms-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, AuthzGuard } from '../services/guards';
import { ApplicationRole } from '../models';
import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { NavComponent } from '../components/nav/nav.component';
import { LeftSidebarComponent } from '../components/left-sidebar/left-sidebar.component';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';

const routes: Routes = [
  {
    path: 'eForms',
    //canActivate: [AuthGuard, AuthzGuard],
    data: {
      roles: [ApplicationRole.EducationAdmin, ApplicationRole.Learner]
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: EFormsListComponent,
        outlet: 'content',
        children: [
          {
            path: 'add/education',
            component: EFormsEducationEditComponent
          }
        ]
      },
      {
        path: '',
        component: NavComponent,
        outlet: 'nav'
      },
      {
        path: '',
        component: LeftSidebarComponent,
        outlet: 'left-sidebar'
      }
    ]
  }
];

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

e-forms-education-edit.component.html

<p>
  e-forms-education-edit works!
</p>

What I'm trying to get is: url: http://localhost:4200/eForms --> render eForms route and first child defined with path ''. This works ok. http://prntscr.com/it7gth

url: http://localhost:4200/eForms/add/education --> render eForms route then render first child and then render it's first chiled defined with path 'add/education'. But when I try this I get not found component. http://prntscr.com/it7i3o

Can someone explain me what I'm doing wrong. Currently I'm not using lazy loading modules or something like this but I have plans to do that in future.

Answer 1

What is actually happening is that your EFormsListComponent will not be load since it is mapped to eForm/ with pathMatch:Full . you are using, PathMatch:Full,then Paths like "eForms/asd","eForms/ s" will considered different. So it wont load the need component. To load EFormsListComponent , use pathMatch:"prefix" . This will match every url. For more info: look at the angular doc T

Answer 2

I think I figured it out. The problem was in named router-outlets. I removed router-outlet with name "content" from app.component.html . Also I removed outlet from routes in e-forms-routing.module.ts . Now it's working.

As far I understand named router outlets are used for displaying small parts of application like popup's. Source: https://angular.io/guide/router#add-a-secondary-route

Thank's everyone for help.