Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'layout' in Angular

Question

I am making a normal login with username and password admin & admin.In login component navigate to layout.But i am getting an error like "core.js:1448 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'layout'".please help me..

app.routing.module.ts

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


@NgModule({
    imports: [
        RouterModule.forRoot([
            {path: '', redirectTo: '/login', pathMatch: 'full'},
            {path: 'login', loadChildren: 'app/login/login.module#LoginModule'}

        ])
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {
}

my login.component.ts is

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username:string;
  password:string;

  constructor(

    public authService: AuthenticationService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {

  }

  login(){
    if(this.authService.login(this.username, this.password)){
      this.router.navigate(['/layout']);
    }
  }
}

my login.routing.module.ts is

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LayoutComponent } from '../layout/layout/layout.component';
import { LayoutRoutingModule } from '../layout/layout-routing.module';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'layout', component: LayoutComponent }




];
@NgModule({
imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]
})
export class LoginRoutingModule { }

you're navigating to the layout route but haven't defined one. — chrispy
The layout route is a child of the login route. Its path is /login/layout. — JB Nizet

Joo Beck Joo Beck · Accepted Answer · 2018-04-02T16:31:43

Extending on what JB Nizet said in your comment, when you have a module that is lazy loaded, the paths inside of that lazy loaded module are relative. If there is any path before the lazy load, that path is pre-pended to ALL of the paths in the lazy loaded module.

So in this case, here is how your paths map:

path: ''
loaded component: LoginComponent
why: redirects to '/login'. See login below for more information.

path : '/login'
loaded component: LoginComponent
why: lazy loads the LoginModule, where is matches the path of '' and thus loads the LoginComponent

path: '/login/layout'
loaded component: LayoutComponent
why: lazy loads the LoginModule, where is matches the path of 'layout' and thus loads the LayoutComponent

path: '/layout'
loaded component: NONE
why: as this is not prepended with 'login' it does not lazy load the LoginModule, and as such is just looking in the app.routing, where the only valid paths are '' and '/login'

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'layout' in Angular

2 Answers