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

Executing the cucumberjs + playwright tests after starting the angular app using the ng serve command

Our testing process involves using cucumberjs and playwright. Is it possible to initiate Angular with ng serve (using test configuration) before running our tests, and then close the application once the tests are complete? Similar to configuring a web s ...

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

Before accessing the page, please ensure to make a double request

Encountered a weird issue, While inspecting the network tab in Chrome devtools, I noticed that my Vue app is making double requests to the same endpoint :/ Here's a snippet of my code: In the router section, I have a beforeEach function. When I navig ...

The condition in a Typescript function that checks for strings will never evaluate to true

I encountered a strange issue with a TypeScript condition in a function. Here is my current code, where the parameters are passed from outside: getLevel(validation: string, status: string): string { let card = ""; if (validation == &qu ...

Encountered a syscall spawn git error while running npm install command

I recently attempted to execute npm install and encountered the following problems: Even after attempting to clear cache forcibly, installing git, and updating node, none of these solutions proved effective. Above is the specific error message I received ...

What is the significance of using the @Input decorator on a component property in Angular?

Within this particular component, I discovered the @Input decorator connected to the variable. @Input() description: string; The variable "description" is then utilized in the HTML as an interpolation. <div>{{description}}</div> This prompt ...

Continuously converting methods recursively until the array is fully processed

My current code has a method that is not very efficient and does not scale well. The object y is an array consisting of key/value pairs, each containing two properties: 1. A unique string property called name. This value is identified by the childre ...

Angular: Issue with click() event not functioning properly once dynamic HTML is rendered

There are a few HTML elements being loaded from the server side, and an Angular click() event is also included. However, the event is not firing after the elements are rendered. It is understood that the DOM needs to be notified, but this cannot be done. ...

Why does Typescript not enforce a specific return type for my function?

In my custom Factory function, I need to return a specific type: type Factory<T> = () => T; interface Widget { creationTime: number; } const createWidget: Factory<Widget> = () => { return { creationTime: Date.now(), foo: &a ...

Problem: Unable to open Angular href links on IOS devices

I am experiencing an issue with a shared-code application in Android and IOS. The link successfully opens on an Android device but fails to open on an IOS device. Are there any differences between the two platforms that could be causing this discrepancy? ...

What is the process for sending a post request in Ionic 2 to a Node server running on localhost?

When working with Ionic, I utilized a service provider to access HTTP resources. The Service.ts file looks something like this. Here, data is represented as a JSON object. import { Injectable } from '@angular/core'; import { Http, Headers } fro ...

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

In my ReactJS project with TSX, I encountered an issue while trying to filter data using multiple key values. The main component Cards.tsx is the parent, and the child component is ShipmentCard.tsx. The error message I'm receiving is 'Property &a ...

Ways to dynamically generate a generic that expands a union class type

Reviewing the code snippet: const events = { a: ['event1' as const, 'event2' as const], b: ['event3' as const, 'event4' as const], }; class SomeClass< T extends AnotherClass<typeof events[keyof typeof ev ...

Issue with running tests on Angular Material components causing errors

Running ng test on my Angular 8 project with Angular material components is resulting in multiple failures. The issue seems to be related to missing test cases for these scenarios. DeleteBotModalComponent > should create Failed: Template parse errors: & ...

Comparing strings with data in objects using Angular

all. I have a query. What is the optimal method for comparing data? For instance, if you have a constant response = 225235743; And I aim to locate and exhibit all data in an object with the same ID as the one in this response. This needs to be resolved ...

Error in Typescript: The type 'string' cannot be assigned to the type '"allName" | `allName.${number}.nestedArray`' within the react hook form

Currently, I am tackling the react hook form with typescript and facing a challenge with my data structure which involves arrays within an array. To address this, I decided to implement the useFieldArray functionality. allName: [ { name: "us ...

bundle.js encountered a TypeError when attempting to read a property that was undefined, specifically while trying to access the PriceIndexationDataControlStandard

In the midst of developing a React component using the Microsoft PCF Framework, I encountered a perplexing error seemingly out of the blue. While making changes in TypeScript without even executing any build commands, the rendering of my component suddenly ...

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

Exploring Angular 2 Routing with onActivate Functionality

I'm having some trouble setting up a component to use the routerOnActivate hook. I keep encountering an error message stating that the property 'routerOnActivate' is missing in the component called 'SettingsHomeComponent', with the ...