未捕获（承诺）：错误：无法匹配任何路线。 URL 段：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 { }

Answer 1

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'

Answer 2

The issue comes up to me after I try to implement lazy loading.

1. Create SpecificModule.routing.module.ts file

   const routes: Routes = [ { path: "", component: AComponent, canActivate: [AuthGuard]}, { path: "newmessage", component: BComponent, canActivate: [AuthGuard], }, { path: "editmessage/:MessageId/:Mode", component: NewmessageComponent, canActivate: [AuthGuard] }, ];

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

2. Import SpecificModuleRoutingModule to SpecificModule

3. Add entries for SpecificModuleRouting to AppRoutingModule.

   import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { AuthGuard } from "./shared/services/auth.guard";

   const routes: Routes = [ { path: "specificmodule", loadChildren: () => import("./specificmodule/specificmodule.module").then(d => d.SpecificModule), canActivate: [AuthGuard] }, ];

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

4. Import SpecificModule to AppModule [This was missing which caused the issue]