title: Angular Routing Error: Cannot match any routes
body: <p>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:</p>
  <pre><code>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: () =&gt; import('./modules/authentication/authentication.module').then(m =&gt; m.AuthenticationModule)
        },
        {
          path: 'home',
          loadChildren: () =&gt; import('./modules/home/home.module').then(m =&gt; m.HomeModule)
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  <p>Then in the authentication as well as home modules, I have defined yet another set of routes,</p>
  <p>authentication.module.ts:</p>
  <pre><code>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 { }
  </code></pre>
  <p>home.module.ts:</p>
  <pre><code>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 { }
  </code></pre>
  <p>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:</p>
  <blockquote>
  <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'authentication/signin'
  Error: Cannot match any routes. URL Segment: 'authentication/signin’</p>
  </blockquote>
  <p>How do I fix this issue?</p>