Angular Routing Issue 'Cannot match any routes'

Question

I just set up a new Angular project and added two Component Routes in my AppRouting Module.

I get the following error when I try to access a route:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'cr-calculator'
Error: Cannot match any routes. URL Segment: 'cr-calculator'
    at ApplyRedirects.noMatchError (router.js:4396)
    at CatchSubscriber.selector (router.js:4360)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

And also the router-outlet doesn't work for me for some reason, it just shows blank even if I have some content in my Route Components.

This is my app-routing.module.ts:

import { CrCalculatorPageComponent } from './../pages/cr-calculator-page/cr-calculator-page.component';
import { HomePageComponent } from './../pages/home-page/home-page.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

export const routes: Routes = [
  {
    path: '',
    data: {
      linkName: 'Home',
      showInMenu: true,
      animation: 'HomePage'
    },
    component: HomePageComponent
  },
  {
    path: 'cr-calculator',
    data: {
      linkName: 'CR Calculator',
      showInMenu: true,
      animation: 'CrCalculator'
    },
    component: CrCalculatorPageComponent
  }
];

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

... and this is my app.module.ts:

import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomePageComponent } from './pages/home-page/home-page.component';
import { CrCalculatorPageComponent } from './pages/cr-calculator-page/cr-calculator-page.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavMenuComponent,
    HomePageComponent,
    CrCalculatorPageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have multi-checked my code and not found anything. I have also checked out some answered Questions here already but nothing helped me solving my issue.

Thanks in advance and please tell me if you need some more code to review the issue.

// EDIT

HTML-Code with routerLink Statements:

<ul class="navbar-nav mr-auto">
  <ng-container *ngFor="let link of links">
    <li class="nav-item" *ngIf="link.data.showInMenu" [routerLinkActive]="['active']">
      <a class="nav-link" [routerLink]="link.path">{{link.data.linkName}}</a>
    </li>
  </ng-container>
</ul>

'links' is basically the routes Object-Array from the app-routing.module.ts

Please also show how you did the link, eg. manually, or [routerLink]. — Alex Biro

Alex Biro Alex Biro · Accepted Answer · 2020-06-02T12:18:53

The way you define the [routerLink], the URL ends up something like cr-calculator. That is a relative URL, because it doesn't start with /. Those don't work if you are not on a top level route. Add a / in front of the top level routes, whenever you are specifying the links in your nav.

Angular Routing Issue 'Cannot match any routes'

2 Answers