Angular Routing Error: 'No routes matched'

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

Answer №1

When you use the [routerLink] in your code, the resulting URL will look something like cr-calculator. This is considered a relative URL because it does not begin with /. Relative URLs may not work if you are not on a top-level route. To prevent issues, always remember to add a / at the beginning of top-level routes when specifying links in your nav.

Answer №2

The problem has been successfully resolved. It may not have been apparent to everyone because when I initially set up the project, I included the App Routing tag in the command line, which automatically created an AppRouting Module and imported it into my app.module.ts. This resulted in having two AppRouting Modules, with my custom routes added to the one I created but the default App Routing module linked in the app.module.ts.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking the power of React using TypeScript for optimal event typing

I need assistance with properly typing events in TypeScript. Consider the following function: import * as React from 'react'; someHandler = (event: React.SyntheticEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) =&g ...

Obtain the data from a promise in Angular

I have a function that returns a Promise, and within that Promise, I receive an object in the resolve. Below is the function from my service that is functioning correctly. buscarUsuario(email: string){ return new Promise((resolve, reject) => { this.ht ...

Resetting a FormArray property using form.reset() in Angular 2 Model-Driven forms does not properly reset the values

I am facing an issue with my Angular 2 model driven form where the count of items in a property of type FormArray is not reset to the original value when I use the myForm.reset(this._originalValue) method. To see the problem in action, you can check out t ...

What is the best way to automatically determine the type of a callback value based on a property within the same object?

As I work on developing a DataGrid component, my goal is to create a feature where the columns can be inferred based on the type of object in each row. The usage scenario for this component would look like: const users: User[] = [ {name: 'John&apos ...

Implementing Object.somefunction() in ngFor with Angular

In my Angular project, I am using an ngFor loop to iterate over keys generated by Object.keys() in the following code snippet: <ul id='nav-tablist' class='tabrows'> <li *ngFor="let tab of obj.keys(tabList)"> ...

Value in Hook not updating after memoization of parent component

Let's consider this scenario: import * as React from "react"; const useMyHook = ({ element }: { element: HTMLElement | null }) => { React.useEffect(() => { if (element) { console.log("element in hook", element); ...

Compelling users to upgrade to the latest version of the Angular 5 application

My Angular 5 application is currently deployed on Azure using ng build --prod. I am looking for a way to ensure that users are always prompted to download the latest version of the application, including any updates to style sheets. However, I have notic ...

Converting lengthy timestamp for year extraction in TypeScript

I am facing a challenge with extracting the year from a date of birth value stored as a long in an object retrieved from the backend. I am using Angular 4 (TypeScript) for the frontend and I would like to convert this long value into a Date object in order ...

Having trouble selecting all checkboxes in Angular

Having issues with selecting all checkboxes in a populated Angular dataTable. I've tried the code below but it doesn't seem to be working. Can you help me find a solution? Please check out the Stackblitz link for a demo. isChecked = false; checku ...

Encountering a problem while installing an Angular 2 npm package from an enterprise registry

We are utilizing an enterprise repository for NPM packages that mirrors the traditional registry "http://registry.npmjs.org/". I am currently attempting to fetch the following packages (listed in package.json) "@angular/common": "2.0.0-rc.4", "@angular/co ...

Troubles encountered with ionic's usage of [innerHTML] within <ion-list>

Encountering an issue while using ionic 3 and angular 2 with styling a large HTML string using [innerHTML]. Strangely, the string gets cut off at the end of the screen instead of wrapping to the next line when placed within an ion-list tag. Any insights on ...

Contrasting Angular HttpClient Requests with Spring Boot's RestTemplate Requests

While attempting to access an Actuator Endpoint from an Angular Application, a CORS error is being encountered. To resolve this, CORS allowed origins can be enabled in the application.yaml file of the Spring Boot Application. An interesting observation i ...

Is Typescript generating error TS2411 within its own Typescript module?

After transitioning to using @types in Typescript 2.0, I executed npm i -S typescript @types/typescript to ensure everything was set up correctly with typescript. However, whenever I run tsc on my project and exclude "node_modules", I encounter the same e ...

Tips on incorporating a child component into a parent component using React and TypeScript

I am trying to conditionally render a child component within a parent component using React and TypeScript. Here is the code I have: const Parent = ({ prop1, prop2 }: { prop1: Prop1, prop2: Prop2; }) => { const isChecked = true; return ( ...

A step-by-step guide on updating environment configurations in VSTS Release Management

I am exploring the use of VSTS Release Management to streamline the deployment process for my Web Application across various deployment locations (dev, test, prod). Currently, I rely on different builds to achieve this, but I aim to consolidate everything ...

The event listener for 'end' is not executing in a Node.js Firebase and Nylas Express application

I am currently working on setting up webhooks with Nylas. In their provided example, there is a middleware code that I am implementing in my TypeScript project using Firebase as the endpoint. When testing locally with ngrok, the middleware functions prop ...

Is it necessary for vertex labels to be distinct within a graph?

I am currently developing a browser-based application that allows users to create graphs, manipulate them, and run algorithms on them. At the moment, each vertex is represented by a unique positive integer. However, I am considering implementing labeled ve ...

Establishing connections to numerous databases using ArangoDB

I am currently developing a product that involves the dynamic creation of a new database for each project, as new teams will be creating new projects based on their specific needs. The backend of the product is built using Node.js, Express.js, TypeScript, ...

Is there a method available that functions akin to document.getelementbyid() in this specific scenario?

Currently, I am tackling a project that involves implementing a search function. My initial step is to ensure that all input is converted to lowercase in order to simplify SQL calls. However, I have encountered a challenge that is proving difficult for me ...

Challenges encountered when implementing a personal library in a separate project

After updating a library I own, I seem to have encountered an issue when trying to use it in another project. However, the reason for this problem eludes me. A multitude of error logs with a similar theme are appearing: ERROR in ./node_modules/@company-na ...