Angular Routing Error: Cannot match any routes

Question

I’m trying to implement lazy loading in my angular application. I have segregated my application into two components; an authentication module and a home module. I’ve defined my routes in the app-routing.Module.ts as follows:

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

const routes: Routes = [
  { path: '', 
    redirectTo: '/authentication/signin', 
    pathMatch: 'full' 
  },
  {
    path: '',
    children: [
      {
        path: 'authentication',
        loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
      },
      {
        path: 'home',
        loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
      }
    ]
  }
];

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

Then in the authentication as well as home modules, I have defined yet another set of routes,

authentication.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SignupComponent } from './signup/signup.component';
import { SigninComponent } from './signin/signin.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { SharedModule } from '../shared/shared.module';

export const authenticationRoutes = [
  {
    path: '',
    redirectTo: 'signup',
    pathMatch: 'full'
  },
  {
    path: 'signin',
    component: SigninComponent
  },
  {
    path: 'signup',
    component: SignupComponent
  },
  {
    path: 'forgot-password',
    component: ForgotPasswordComponent
  }
];

@NgModule({
  declarations: [
    SignupComponent,
    SigninComponent,
    ForgotPasswordComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild(authenticationRoutes)
  ]
})
export class AuthenticationModule { }

home.module.ts:

import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

export const authenticationRoutes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class HomeModule { }

With this, whenever I try to execute my code, I expect an empty URL to redirect me to signup, however whether I specify a route or not, I end up getting the same error, one that states:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'authentication/signin' Error: Cannot match any routes. URL Segment: 'authentication/signin’

How do I fix this issue?

Gokul Prasannan Gokul Prasannan · Accepted Answer · 2020-12-02T04:20:45

You have an issue in the app-routing-module. When checking for a matching path both the paths have blank and since you have given first to redirect when the path is blank the app never reaches any other path. Best way is to not specify the authentication and home modules as children and reroute to authentication on seeing path 'authentication' like below

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

const routes: Routes = [
    {
        path: 'authentication',
        loadChildren: () => import('./modules/authentication/authentication.module').then(m => m.AuthenticationModule)
    },
    {
        path: 'home',
        loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
    },
    { 
        path: '**', //If path doesn't match anything reroute to /authentication/signin
        redirectTo: '/authentication/signin', 
        pathMatch: 'full' 
    },
];

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

Angular Routing Error: Cannot match any routes

1 Answers