CODEWITHSUNDEEP
angular
Sithys
Sithys

Reputation: 3803

Routing with lazyLoading in children not working - cannot match route

This is my app-setup:

enter image description here

This is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SoftwareComponent } from './components/software/software.component';

const routes: Routes = [
    {
        path: '',
        outlet: 'main',
        component: SoftwareComponent,
        children: [
            {
                path: 'personal',
                children: [
                    {
                        path: '',
                        loadChildren: './components/software/data/personal/personal.module#PersonalModule' 
                    }
                ]
            }
        ]
    }   
];

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

My Error is:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'personal' Error: Cannot match any routes. URL Segment: 'personal'

Maybe someone can tell whats wrong with my setup?

Upvotes: 0

Views: 926

Answers (1)

Dzhavat Ushev
Dzhavat Ushev

Reputation: 735

Move the personal on the same level as the first ''.

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'personal'
    },
    {
        path: 'personal',
        outlet: 'main',
        component: SoftwareComponent,
        children: [
            {
                path: '',
                loadChildren: './components/software/data/personal/personal.module#PersonalModule' 
            },
            {
                path: '',
                loadChildren: './components/software/header/header-personal/header-personal.module#HeaderPersonalModule'
            }
        ]
      }
    }   
];

Upvotes: 1

Related Questions