: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

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

javascriptangular

Utilize Firebase for Playwright to efficiently implement 'State Reuse' and 'Authentication Reuse'

In my testing environment, I want to eliminate the need for repeated login actions in each test run. My approach involves implementing 'Re-use state' and 'Re-use Authentication', but I've encountered a challenge with Firebase using ...

typescriptfirebasetestingautomationplaywright

Standards for coding across different languages

As I work on developing a framework that accommodates both C# and TypeScript, I am faced with an interesting dilemma. Take, for instance, the Validator class in C#: class Validator { public bool Validate(string value) { return someConditi ...

c#coding-styletypescript

Implementing a click event on a button within an infowindow on Google Maps in Angular

I've successfully set up the infowindow on my Google Maps and I'm looking to include a button inside it. Here's the code I used: InitializeMap() { this.map = new google.maps.Map(document.getElementById('map'), { zoom: 10, cen ...

angulargoogle-mapsinfowindow

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

cssangularangular-materialstyling

Using Regular Expressions: Ensuring that a specific character is immediately followed by one or multiple digits

Check out the regular expression I created: ^[0-9\(\)\*\+\/\-\sd]*$ This regex is designed to match patterns such as: '2d6', '(3d6) + 3', and more. However, it also mistakenly matches: '3d&apos ...

regextypescript

Geolocation plugin in Ionic encountered an issue: "Geolocation provider not found"

I've been working on implementing geolocation in my ionic2 hello world project, and I successfully added the ionic plugin called "Geolocation" by following the instructions on the official website. After running these two commands: $ ionic plugin add ...

angulartypescriptionic2cordova-plugins

The HTTP post method is not consistently triggering

Currently, I am in the process of developing a logout feature for angular (with a spring backend). The logout action is triggered by sending an HTTP post request to /auth/logout, where the endpoint invalidates the auth-token and refresh-token HTTP-only coo ...

angularspring

Can one assess a private method within a class?

Within my Ionic 3 (Angular 4) application, I am working with the following code snippet: this.$observable.subscribe(success => { if (success) { this.toastCtrl.create({ message: 'message, duration: 3000, position: 'midd ...

angularunit-testingkarma-jasmine

Aligning the React Navigation header component's bottom shadow/border width with the bottom tabs border-top width

Currently, I am working on achieving a uniform width for the top border of the React Navigation bottom tabs to match that of the top header. Despite my efforts, I am unable to achieve the exact width and I am uncertain whether it is due to the width or sha ...

reactjstypescriptreact-nativereact-navigation

Eliminating the InMemoryWebApiModule in the production configuration of webpack for Angular applications

Currently, I am utilizing the InMemoryWebApiModule to simulate my data during development, but I want to prevent it from being used in a production environment. Is there a method to exclude it from being used in production on webpack? I have been attempt ...

angularwebpack-dev-serverwebpack-2

Having difficulty transferring types to and from a custom module?

I'm currently faced with an issue while working on a typescript module within a larger monorepo. I am having difficulty importing types from one package into another via node modules. The types are located at ./types, and my package.json contains a ke ...

typescriptnpmnode-modulestypescript-typings

I am struggling to set up angular-localstorage4

I have been following the instructions in the provided link: angular-localstorage4 When attempting to import WebStorageModule and LocalStorageService from angular-localstorage, I encounter an error in the console even though the compilation is successful. ...

javascriptangular

Solving the 'never' type issue in Vue3 and TypeScript for an empty array reference

I am currently in the process of migrating a component from an old Vue project that relies solely on JavaScript to a TypeScript/Vue project, and I have encountered some obstacles along the way. <script lang="ts"> import { computed, ref } fr ...

typescriptvue.jsvuejs3

Checking all checkboxes in a list using Angular 5: A simple guide

I have a list that includes a checkbox for each item, and I want to confirm if all of them are checked off. This is the HTML code snippet: <ul class="ingredient-list" > <li class="btn-list" *ngFor="let ingredient of recipe.ingredients"> ...

javascripthtmlangularangular5

How is it possible for this for loop to function properly without the need to pass the incrementing variable

I managed to compile my code and it's working fine, but there's something interesting - the variable that should reference the incrementing value is not included as an argument in the for loop. var _loop2 = function _loop2() { var p = docume ...

javascripttypescriptfor-loop

Executing a service call test within my component's unit test

Is there a simple way to test if my service is being called? myComp.ts constructor(private myService: MyService) {} myFunction() { this.myService.someFunction(); } myTest.ts beforeEach(async(() => { TestBed.configureTestingModule({ imp ...

angularunit-testingtestingkarma-jasmine

Update the data in Firebase, but revert it back to the original state after a few seconds with the use of "angularFire."

I'm currently working on updating data in the Firebase Realtime Database using Angular and AngularFire. The issue I'm facing is that even though the data changes successfully, it reverts back to the original data after a few seconds. Below is the ...

javascriptangularfirebasefirebase-realtime-databaseangularfire

Having difficulties incorporating a separate library into an Angular project

My typescript library contains the following code, inspired by this singleton example code export class CodeLib { private static _instance: CodeLib; constructor() { } static get instance(): CodeLib { if(!this._instance){ ...

angulartypescriptwebpack

"Data in Fusioncharts appears to be correctly formatted, but it is having difficulties

I am developing a financial analysis tool and I need to visualize stock data using fusion charts. Currently, my dataset includes stock values along with their respective dates: $scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" } ...

angularfusioncharts