Sending Information to Routes - Error: No Routes Found to Match

I recently tried implementing a solution from an article () to pass an ID between modules in order to use it as a search filter. However, I encountered the "cannot match any routes" error and have been struggling for some time since I'm new to Angular and unsure of what mistakes I might be making.

Error Log

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'municipality/%5B'./municipalityListDep',department.code%5D'
Error: Cannot match any routes. URL Segment: 'municipality/%5B'./municipalityListDep',department.code%5D'
    at ApplyRedirects.noMatchError (router.js:4295)
    at CatchSubscriber.selector (router.js:4259)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    ... // Error log continuation

municipality-listdep.component.ts

import { Component, OnInit }    from '@angular/core';
import {ActivatedRoute}         from '@angular/router';
... // Code continuation

municipality.component.html

<h1>Municipios</h1>
<br />
<br />
... // HTML code continuation

municipality.component.ts

import { Component, OnInit }    from '@angular/core';
import { Observable }           from 'rxjs';
... // Code continuation

municipality-routing.module.ts

import { NgModule }                         from '@angular/core';
import { RouterModule, Routes }             from '@angular/router';
... // Code continuation

Answer №1

Upon reviewing the code in stackblitz, here is an updated answer:

An issue lies within this section:

municipality.component.html

<a routerLink="['/municipalityListDep',department.code]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>

When you click the

<a routerLink="['/municipality/municipalityListDep',department.code]">
, it attempts to navigate to
localhost:4200/municipalityListDep/:dep

However, the correct navigation should be

localhost:4200/municipality/municipalityListDep/:dep
as configured in municipality-routing.module.ts

To resolve this, adjust the path to navigate relative to the url path:

/municipality/municipalityListDep

In essence, make these changes initially:

municipality.component.html

<a routerLink="['../municipalityListDep',department.code]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>

Additionally, the second issue pertains to the usage of "department.code" in the routerLink (highlighted with ('HERE->''<-HERE')):

<div fxFlex="0 1 calc(33.3% - 10px)">
    <nav fxLayout="column" fxLayoutGap="10px">
        <a routerLink="municipalityList" class="button" role="button" routerLinkActive="active">Lista De Municipios</a>
        <a routerLink="['../municipalityListDep','HERE->'department.code'<-HERE']" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>
        <div fxLayout="row">
        <img id="arrow" src="assets/LArrow.png" style="width:5%;height:3%;">
        <select class="button" type="text" id="srdep" required [(ngModel)]="depcode" name="srdep">
            <option *ngFor="let department of departments | async" [value]="department.code">{{department.name}}</option>
        </select>
        </div>
    </nav>
</div>

If you are utilizing "department" and "department.code" from the *ngFor loop in municipality.component.ts without any declaration, I suggest restructuring your elements to ensure proper scope for referencing department.code.

Alternatively, if you intend to use the selected value from the <select> (which seems correct), store this value in a property (depcode) and reference it in the <a>:

<a [routerLink]="['../municipalityListDep',this.depcode]" class="button" role="button" routerLinkActive="active">Lista De Municipios Por Departamento</a>

Does this address your issues effectively?

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

Unleashing the Potential: Integrating a Scanner Device with

Currently, I'm facing the challenge of integrating a Scanner device with my Angular application. On one of the pages dedicated to scanning, users are able to view an alert indicating the connection status of the Scanner as well as any scanned document ...

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

arrayOne: [ { id: 1, compId: 11, active: false, }, { id: 2, compId: 22, active: false, }, { id: 3, compId: 33, active: false, }, ] arrayTwo: [ { id: 1, compId: 11, active: true, }, { id: 2, compId: 33, active: false, ...

Error encountered when creating a new project using ASP.NET Core (.NET 5) and Angular 11

When I start a new ASP.NET Core Web API + Angular project in Visual Studio by using: dotnet new angular, it sets up a .NET 5 project with an Angular 8.2 project in the ClientApp folder. After hitting F5, everything runs smoothly. However, I want to work ...

What is the method for inserting a loop into a print template?

There is a print method available: printData(data): void { console.log(data); let printContents, popupWin; popupWin = window.open(); popupWin.document.write(` <html> <head> <title>Print tab</title> ...

Create a custom button in Material-UI using Styled-components, and integrate it with React

I'm currently working on a project using React, TypeScript, and styled components along with the material-ui library. I have created styled material-ui buttons as shown below: import React from 'react' import styled from 'styled-compone ...

AbstractControl is missing the 'controls' property in Angular4

Many blogs have discussed this error, but none specifically for angular4. I am dynamically adding and removing controls on the form. Add controls to the form during initialization ngOnInit() { this.lienHolder = this._fb.group({ ...

Mapping an array based on its individual values

How can I sum values in an array of objects based on a specific condition? [{amount:100, prefix:'a'},{amount:50, prefix:'b'},{amount:70, prefix:'a'},{amount:100, prefix:'b'}] Is there a method to map and calculate t ...

How can I effectively test a method within a React component using Jest and Typescript?

When working on .tsx components using Typescript and React, I want to write unit tests for the methods within my React component. For example: export default class SomeComponent extends React.Component<undefined, SomeComponentState> { someMetho ...

Leverage the generic parameter type inferred from one function to dynamically type other functions

I am in the process of developing an API for displaying a schema graph. Here is a simplified version of what it entails: interface Node { name: string; } type NodeNames<T extends Node[]> = T[number]["name"]; // Union of all node names as strings ...

Angular is unable to fetch the chosen option from a dropdown selection

Recently, I encountered an issue with a module form that appears as a pop-up. Within this form, users can input data required to create a new object of a specific class. One field allows users to select a ventilation zone for the new room object being crea ...

Extracting PNG file from response (bypassing standard JSON extraction)

Despite my efforts to find a solution, I am still unable to resolve this specific issue: I have implemented an Angular request (localhost:4200) to an API on Spring (localhost:8080). The HttpService successfully handles the requests, except when it comes to ...

The argument provided is of type 'string | null' which cannot be assigned to a parameter expecting only 'string' type. The value of 'null' is not compatible with the type 'string' in Angular 12

When trying to parse the stored session data using JSON.parse(sessionStorage.getItem('owner')), we may encounter an error stating: Argument of type 'string | null' is not assignable to parameter of type 'string'. This is becau ...

Create an interface that inherits from a class

I am currently in the process of converting some code that attempts to create an instance of http.ServerResponse. However, typescript is throwing an error: [ts] Property 'ServerResponse' does not exist on type 'typeof "http"'. I hav ...

The validation of DOM nesting has detected that a <td> element cannot be placed within an <a> element

When working on a React project with Material UI, I encountered an issue while trying to create a table. My goal was to make the entire row clickable, directing users to a page with additional information on the subject. Below is the snippet of code for th ...

Make sure that the input for a function is a valid key within a specific interface, and that the corresponding value in the interface is

I'm a beginner in TypeScript and I've hit a roadblock with this issue. Despite searching extensively, I haven't found a solution yet. My goal is to create a well-typed sorting function that takes two parameters: an array of objects and the ...

Managing Errors in Angular: Utilizing Interceptors and Modal Pop-ups

I recently finished developing an Angular 5 application that effectively handles errors for each API call made. By utilizing the HttpClient, I am able to catch errors that occur post request sent to the server. The error interception occurs within a servic ...

Preventing Memory Leaks in Single Page Applications (SPAs) Using Google DFP with Angular and Vue: A Guide to Properly Destroying Ads and Their References

I recently encountered an issue while trying to implement Google's DFP in both Vue.js and Angular single-page applications (SPAs) where it appears to be leading to a memory leak. For Angular: I have created a proof of concept which can be found here. ...

It appears that React Native's absolute paths are not functioning as expected

I have been attempting to set up React Native with absolute paths for easier imports, but I am having trouble getting it to work. Here is my tsconfig.json: { "compilerOptions": { "allowJs": true, "allowSynthetic ...

Is there a way to eliminate text from a barcode image using JavaScript or TypeScript?

This is my unique html code <div class="pr-2" style="width: 130px"> <div *ngIf="!element.editing" > <span class="ss">{{element.barcode}}</span> </di ...

Compile a roster of service providers specializing in unit testing imports

Recently joining a new team that works with Angular, they asked me to implement unit testing on an existing project built with Angular 8. After researching the best approach, I decided to use Karma + Jasmine for testing. I set up a .spect.ts file structure ...