:id Path replaces existing routes

My route configuration looks like this:

const routes: Routes = [

  { path: '', component: UserComponent, children: [
      { path: '', component: LoginComponent },
      { path: 'signup', component: SignupComponent }
    ]},
  { path: 'dashboard', component: MainComponent, children: [
      { path: '', component: DashboardComponent, children: [
          { path: '', redirectTo: '0', pathMatch: 'full' },
          { path: '0', component: NoListComponent },
          { path: ':id', component: ListComponent },
        ]},
      { path: 'createlist', component: CreateListComponent },
      { path: 'create', component: CreateTaskComponent }
    ]},
];

When using routerLink="dashboard/create" or 

routerLink="dashboard/createlist"
, the issue arises where only the ListComponent displays with no content, instead of CreateListComponent or CreateTaskComponent.

angulartypescriptangular-routing

Answer №1

Just to provide some clarification on the previous answers, the order of routes is crucial. It's important to place /createlist and /create before :id in your route configuration.

{
  path: 'dashboard', component: MainComponent, children: [
    {
      path: '', component: DashboardComponent, children: [
        { path: '', redirectTo: '0', pathMatch: 'full' },
        { path: 'createlist', component: CreateListComponent },
        { path: 'create', component: CreateTaskComponent },
        { path: '0', component: NoListComponent },
        { path: ':id', component: ListComponent }
      ]
    }
  ]
}

If you place them after :id, they will be overridden because :id will match any nested route that appears after /dashboard.

Answer №2

To update your routing setup, follow the configuration below:

{
    path: 'dashboard',
    component: MainComponent,
    children: [{
        path: '',
        component: DashboardComponent,
        children: [{
                path: '',
                redirectTo: '0',
                pathMatch: 'full'
            },
            {
                path: '0',
                component: NoListComponent
            },
            {
                path: 'createlist',
                component: CreateListComponent
            },
            {
                path: 'create',
                component: CreateTaskComponent
            },
            {
                path: ':id',
                component: ListComponent
            }
        ]
}

This modification is necessary since /createlist and /create are child routes under /dashboard. Pay attention to the order of the paths provided above.

Answer №3

Your current route setup in Angular seems to be causing some confusion. When you try to access "/dashboard/create", Angular interprets it as trying to reach "/dashboard/:id" with the id value set as "create". To avoid ambiguity, it is important to ensure that your paths are distinct and clear.

I would suggest defining your routes like this:

{ path: '', component: DashboardComponent, children: [
          { path: '', redirectTo: 'no-list', pathMatch: 'full' },
          { path: 'no-list', component: NoListComponent },
          { path: 'list/show/:id', component: ListComponent },
          { path: 'list/createlist', component: CreateListComponent },
          { path: 'list/createtask', component: CreateTaskComponent },
]}

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

Resolve the Typescript issue that occurs while modifying MuiDataGrid within createTheme

I am trying to customize my DataGridPro table, which is a MUI component, within the theme. However, when I add MuiDataGrid to the components object, I encounter a TypeScript error: Object literal may only specify known properties, and 'MuiDataGrid&apo ...

typescriptmaterial-ui

Managing a digital timepiece within a multiplayer gaming environment

I'm currently developing a fast-paced game where players control a block resembling a clock. To accurately calculate the time taken by each player to make moves, I store the start time of the game and record the timestamp of every move in the databas ...

javascriptmysqlnode.jstypescript

The type '{ componentParent: this; }' does not share any properties with the type 'Partial<RegisterEnterpriseComponent>' in Angular

Currently working with angular 10, attempting to display a modal in my component, however encountering the following error: The type '{ componentParent: this; }' has no properties in common with the type 'Partial<RegisterEnterpriseCompone ...

angularmodal-dialogcomponents

Code snippet demonstrating how to use multiple filters in Angular 2

Exploring the world of AngularJS, I am striving to replicate the functionality provided in this JSFiddle using Angular 2. In my previous attempt with Angular 1, this was the HTML code I utilized: Essentially, I have an array structured like: [ {name: ...

angular

Develop a query builder in TypeORM where the source table (FROM) is a join table

I am currently working on translating this SQL query into TypeORM using the QueryBuilder: SELECT user_places.user_id, place.mpath FROM public.user_root_places_place user_places INNER JOIN public.place place ON place.id = user_places.place_id The ...

sqltypescriptpostgresqltypeorm

Occasionally encountering missing modules with Vscode and NestJs

This situation is really frustrating: I started a brand new NestJs project using the @nestjs/cli command. Everything was going smoothly at first. However, after adding a controller with nest generate controller mycontroller and installing types for jasmine ...

node.jstypescriptvisual-studio-codenestjs

Error: The specified function in the schema is not valid for the current operation mode

I'm facing an issue with validating a material ui form using Formik and Yup. The error keeps popping up. This is the schema I imported from another file: export const validationSchema = Yup.object({ email: Yup.string() .email('Invalid Ema ...

javascriptreactjstypescriptformikyup

Unable to retrieve data header in the Angular 10 build version

I have a code snippet for an HTTP request: return this.http.post<any>(this.path.userRoot + '/logIn/random', body, { withCredentials: true, responseType: "json", observe: 'respon ...

node.jsangularhttprequesthttpresponse

What is the best way to extract and display data from an API response object in my

{ "_metadata": { "uid": "someuid" }, "reference": [ { "locale": "en-us", ... bunch of similar key:value "close_icon_size" ...

reactjstypescriptobjectnext.jstypes

Issues with Angular's router outlet link functionality not performing as expected

I am encountering difficulties trying to create a link to a named router outlet in Angular. Let's focus on the most crucial part of the code: app-routing-module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } ...

angulartypescriptroutes

Discover a method to deselect a checkbox within a separate component in angular15

I am currently dealing with Angular15 and I find myself stuck on an issue related to checkbox selection change. Situation: As per the requirements, I have a menu bar and a Checkbox. The Checkbox is generated from a reusable component which is used in the ...

angulartypescript

Is there a way to accurately capture the timestamp of when a user clicks the submit button in Angular 2 framework?

Within my HTML file, I have implemented an onRegisterSubmit() function to handle the submission of a form. The register.ts file is responsible for adding user input from the form, as well as validating and authenticating the user. onRegisterSubmit(){ ...

node.jsangularexpressweb

Learn how to incorporate the dynamic array index value into an Angular HTML page

Exploring Angular and facing a challenge with adding dynamic array index values in an HTML page. Despite trying different solutions, the answer remains elusive, as no errors are being thrown. In TypeScript, I've initialized an array named `months` wh ...

javascriptangular

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

javascriptcssangularsassfrontend

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

Limit the outcomes of the Ionic timepicker

Currently, I am utilizing the ionic datetime feature. However, instead of receiving just the hours, minutes, and seconds, the result I am getting looks like this 2020-10-05T00:00:27.634+07:00. What I actually require from this output is only 00:00:27. Is ...

javascriptangulartypescriptionic-framework

What is the method for comparing fields within an input type in type graphql with the assistance of class validator decorators?

I am working with the following example input type: @InputType() class ExampleInputType { @Field(() => Number) @IsInt() fromAge: number @Field(() => Number) @IsInt() toAge: number } Can I validate and compare the toAge and fromAge fields in th ...

typescriptgraphqltypeormclass-validatortypegraphql

Ways to obtain the Map object from HTTPClient in Angular

When calling a REST endpoint, the return type is as follows: ResponseEntity<Map<String, List<Object>>> How can I handle this response on the Angular side? I attempted the following approach: let requiredData = new Map<String, Array&l ...

angulartypescriptrest

The NgModel variable, which is exported through Angular7 template driven validation, appears to be returning an

Trying to set up a straightforward template-driven form validation, I encountered an issue with #password="ngModel". When I check password.length, it returns undefined and I'm not sure why. Here is my Angular form: <form #f="ngForm"> <inp ...

angularangular7

Having issues with my Angular 4 + MVC web application not functioning properly in Internet Explorer

After creating an application using Angular 4 and MVC, I noticed a problem specifically with Internet Explorer. The application runs smoothly on Chrome, Firefox, and other browsers except for IE. Does anyone have any suggestions on how to resolve this br ...

asp.net-mvcangularinternet-explorer