title: Angular Unit Test: Uncaught Error: Uncaught (in promise): Error: Cannot match any routes
body: <p><em>I am struggling with Angular Unit test on running</em> <strong>&quot;ng test&quot;</strong>, <em>I get the below error in terminal.</em></p>
  <pre><code>ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-account'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-account'
  Error: Cannot match any routes. URL Segment: 'my-account'
  
  ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-cards'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-cards'
  Error: Cannot match any routes. URL Segment: 'my-cards'
      at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)
  
  ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
  Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
      at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)
  
  
  ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'home'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'home'
  Error: Cannot match any routes. URL Segment: 'home'
  </code></pre>
  <p><strong>The route files are as below-</strong></p>
  <h2><strong>app-routing.module.ts</strong></h2>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { OtpComponent } from './otp/otp.component';
  import { AuthGuard } from './_guards/auth.guard'
  
  const routes: Routes = [
    { path: '', loadChildren: './login/login.module#LoginModule' },
    {
      path: 'login',
      loadChildren: './login/login.module#LoginModule'
    },
    {
      path: 'forgot-password',
      loadChildren: './forgot-password/forgot-password.module#ForgotPasswordModule'
    },
    {
      path: 'home',
      loadChildren: './home/home.module#HomeModule', canActivate: [AuthGuard]
    },
    {
      path: 'my-account',
      loadChildren: './my-account/my-account.module#MyAccountModule', canActivate: [AuthGuard]
    },
    {
      path: 'account-setting',
      loadChildren: './account-setting/account-setting.module#AccountSettingModule', canActivate: [AuthGuard]
    },
    {
      path: 'create-account',
      loadChildren: './create-account/create-account.module#CreateAccountModule',
    },
    {
      path: 'my-cards',
      loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
    },
    {
      path: 'my-cards/:card_id',
      loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
    },
    {
      path: 'faq',
      loadChildren: './faq/faq.module#FaqModule'
    },
    {
      path: 'change-password',
      loadChildren: './change-password/change-password.module#ChangePasswordModule'
    },
    {
      path: 'add-beneficiary',
      loadChildren: './add-beneficiary/add-beneficiary.module#AddBeneficiaryModule', canActivate: [AuthGuard]
    },
    {
      path: 'give-feedback',
      loadChildren: './feedback/feedback.module#FeedbackModule', canActivate: [AuthGuard]
    },
    {
      path: 'my-profile',
      loadChildren: './my-profile/my-profile.module#MyProfileModule', canActivate: [AuthGuard]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <h2><strong>app.module.ts</strong></h2>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule } from '@angular/router';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { AppRoutingModule } from './app-routing.module';
  import { PolymerModule } from '@codebakery/origami';
  import { AppComponent } from './app.component';
  
  import { AuthGuard } from './_guards/auth.guard';
  import { LoginModule } from './login/login.module';
  import { SharedModule } from './shared/shared.module';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      PolymerModule,
      BrowserAnimationsModule,
      HttpClientModule,
      RouterModule,
      LoginModule,
      SharedModule,
    ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: MbwHttpInterceptor,
        multi: true,
      },
      AuthGuard
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>Please help what did I missed or doing wrong in the above....</p>
  <p>I had also tried multiple solutions from stackoverflow tried with RouterTestingModule.withRoutes[] within spec.ts file of component having the route,</p>
  <p>Also tried changing routerLink=&quot;/home&quot; to [routerLink]=['home'] this also didn't work,
  <em><strong>On running ng test the above error persists....</strong></em></p>