Having difficulty reaching the specified route ID in Angular app

I'm encountering an issue when attempting to navigate to a route with an ID argument using the router.

Here's the code snippet from my component:

import { Router } from '@angular/router';
...
constructor(private router: Router) { }
...
public create() {
    ...
    this.router.navigate(['/category/edit', id]);
}

This results in an error:

Error: Cannot match any routes. URL Segment: 'category/edit;id=11'
    at ApplyRedirects.noMatchError (router.js:1719)
    ...

Interestingly, when I include the same logic in the template, it works perfectly fine:

<tbody>
    <tr *ngFor="let category of model">
        <td>{{category.name}}</td>
        <td>{{category.code}}</td>
        <td>
            <button type="button" class="btn btn-outline-primary" [routerLink]="['/category/edit', category.id]">Edit</button>
        </td>
    </tr>
</tbody>

Here is how my route is defined:

{
    path: 'category/edit/:id',
    component: EditComponent,
    resolve: {
        model: CategoryResolver
    }
}

I've tried with and without the resolver, but unfortunately, it doesn't seem to work either way.

My Angular version is 5.2.0 and CLI version is 1.6.5.

Answer №1

When using

this.router.navigate(['/category/edit', id]);
, the resulting URL is category/edit;id=11. Query parameters (such as ;id=11) are applied when passing an object instead of a string. It seems that the variable id is being treated as an object rather than a string.

id: Object = {id: '11'};

The correct approach would be to use:

id: string = '11';

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

Utilizing ActivatedRoute in conjunction with another Service

I am facing an issue while trying to utilize the ActivatedRoute service in a different service. The problem lies in the fact that when I use the ActivatedRoute service in my service, it is observing the main App component and not picking up any route param ...

Guide on assigning json array values to multiple accordion forms in Angular 6

Utilizing multiple accordion forms on the same page poses a challenge. When the Add button is clicked, an additional accordion form is added to the page. Upon submitting the second form, a set of JSON data is submitted. The resulting JSON array after three ...

Mastering the utilization of API routes within the Next JS 13 App Router framework

As a newcomer to React JS and Next.js, I recently made the switch from using the Page Router API in Next.js to utilizing the new App Router introduced in Next.js 13. Previously, with the Page Router, creating a single GET request involved nesting your "JS ...

find the element in cypress with multiple child elements

Looking for a way to target the first HTML element that contains more than 2 children. Another option is to access the children elements of the first parent element. <div class="market-template-2-columns"> <button type="button&q ...

How does one distinguish between the uses of "any" and "any[ ]"?

Exploring the Difference Between any and any[ ] An Illustrative Example (Functioning as Expected) variable1: any; variable2: any[]; this.variable1 = this.variable2; Another Example (Also Functioning as Intended) variable1: any; v ...

Encounter a problem while running `ng build` due to a module not

I was looking to automate the building of my Angular project on a separate CentOS 7 machine. Here are the versions being used: Angular CLI: 8.3.23 Node: 13.14.0 OS: linux x64 Angular: 8.2.14 ... animations, common, compiler, compiler-cli, core, forms ... ...

Struggling to properly interpret and process the latest data being sent from an Angular single page application (SPA

Currently, I am developing a Single Page Application that utilizes Angular 8 on the frontend and Laravel on the backend. The application involves performing CRUD operations, and specifically when dealing with editing functionality, I encounter an issue. Th ...

Dealing with problems related to types in React and TypeScript createContext

Struggling to pass the todos (initial state) and addNewTodo (methods) using React Context hook and typescript. Despite trying multiple solutions, errors persist. Partial generics do not cause issues in the context component, but I encounter the error Cann ...

Why does the Amazon DynamoDB scan trigger an error by making two HTTP requests to the server?

My TypeScript React application is using DynamoDB services to store data, with a JavaScript middleware handling the database access operations. While developing locally, I successfully implemented the scan, put, and delete operations with no errors. Howeve ...

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

Currently, I am utilizing ts-morph library which makes use of the TS Compiler API. Here is an example of my code: export type Foo = string export const foo: Foo = 'bar' Whenever I try to find the type for the export of foo, it returns string. H ...

The importance of handling undefined values in TypeScript and React

There is a condition under which the IconButton element is displayed: {value.content && <IconButton aria-label="copy" onClick={() => copyContent(value.content)}> <ContentCopy /> </IconButton> } However, a ...

Tips for patiently waiting for a method to be executed

I have encountered a situation where I need to ensure that the result of two methods is awaited before proceeding with the rest of the code execution. I attempted to use the async keyword before the function name and await before the GetNavigationData() me ...

Using the keyof operator to determine the data type of a property within a TypeScript class

According to TypeScript's documentation on the keyof operator, you can access a property of an object instance using this function below. function getProperty<T, K extends keyof T>(o: T, name: K) { return o[name]; } If you want to obtain th ...

Which rxjs operator functions similarly to concatmap, but delays the firing of the next request until the current one is completed?

Imagine if I need to make multiple api calls with a high risk of encountering race conditions. If I send 3 requests simultaneously to update the same data on the server, some of the information could be lost. In order to prevent this data loss, I want to ...

Error in Angular 8: Module loading from "url" has been intercepted due to an unsupported MIME type ("text/html") being blocked

I have developed an application using Angular 8 and Node 12. When I try to open a new tab or reload the page after building Angular 8, I encounter an issue for which I have extensively searched online but found no solution. In the Firefox console, the er ...

Angular4 allows the creation of new rows when products are added to a carousel component

Currently, I am working on an Angular4 application that includes a carousel displaying popular products. At the moment, the default view shows 3 products, and clicking on the left or right buttons reveals another set of 3 products. The total static values ...

Is it possible to implement Lazy Loading exclusively on the full path in Angular 2?

Here are the paths that showcase my route configuration: calendar/2016/11/15 = Day View (DayModule) calendar/2016/11 = Month View (MonthModule) calendar/2016 = Year View (YearModule) Each view is equipped with its own Module and Components which I want ...

Blend the power of Node's CommonJS with the versatility of Typescript's ES modules

I currently have a Node.js v10 legacy application that was built using CommonJS modules (require). The entire codebase is written in JavaScript. However, I am considering upgrading the app and refactoring a specific part of it to use TypeScript modules ( ...

Using Angular's filter pipe to search within a nested array

We are attempting to implement an angular pipe for filtering a list of sub-items, with the goal of removing parent items if there are no child items present. Here is the HTML code snippet we are using: <div class="row border-bottom item" *n ...

Update the data by appending a textstringValue

Is there a way to update a field value using a string in TypeScript? The following code isn't functioning as expected: fieldName = "myForm.controls.graphicUrl"; this[fieldName].patchValue("hello"); ...