Just completed the setup of a new Angular project and added two Component Routes in my AppRouting Module.
Encountering an error when attempting 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)
...
Additionally, the router-outlet is not functioning as expected, displaying blank even though Route Components have content.
Here's 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';
...
...and here's my app.module.ts
:
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
...
Reviewed the code multiple times without finding any issues. Checked other answered questions but none resolved the problem.
Your assistance is appreciated, let me know if you require additional code for troubleshooting.
// 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' represents the routes Object-Array from the app-routing.module.ts