Angular relative routes are failing to function

Question

Angular relative routes are failing to function

I am currently working on implementing a feature module in my project and following the documentation provided.

My crisis-routing.module file looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component';

const routes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CrisisCenterRoutingModule { }

While I thought I would be able to access the id with this code snippet:

 [routerLink]="['./crisis-center/..', crisis.id]"

I could use some assistance, can anyone help me?

angular typescript

Answer 1

Answer №1

In my experience, I have discovered that Angular has a recommended method for organizing parameters with child pages. The route declarations would look something like this:

children: [
      {
        path: ':id',
        component: CrisisListComponent,
        children: [
          {
            path: 'crisis-home',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]

To access the routes, you can use the following syntax:

[routerLink]="['./crisis-center/..', crisis.id, 'crisis-home']"

This will generate the URL:

localhost/crisis-center/1/crisis-home

Answer 2

In my experience, I have discovered that Angular has a recommended method for organizing parameters with child pages. The route declarations would look something like this:

children: [
      {
        path: ':id',
        component: CrisisListComponent,
        children: [
          {
            path: 'crisis-home',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]

To access the routes, you can use the following syntax:

[routerLink]="['./crisis-center/..', crisis.id, 'crisis-home']"

This will generate the URL:

localhost/crisis-center/1/crisis-home

Answer 3

Answer №2

While I have successfully implemented some functionality, I am facing challenges when it comes to working with nested children.

My updated routes are as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component';
import { CrisisDetailedComponent } from './crisis-detailed/crisis-detailed.component';

const crisisRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        // children: [
        //   { path: '', component: CrisisCenterHomeComponent },
        //   { path: 'crisis/:id', component: CrisisDetailedComponent },
        // ]
      },
      { path: ':id', component: CrisisDetailedComponent },
      { path: 'home', component: CrisisCenterHomeComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(crisisRoutes)],
  exports: [RouterModule]
})
export class CrisisCenterRoutingModule { }

I'm puzzled as to why only one nested route is being accepted; it's possible that I am not accessing the routes correctly.

Answer 4

While I have successfully implemented some functionality, I am facing challenges when it comes to working with nested children.

My updated routes are as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';
import { CrisisCenterHomeComponent } from './crisis-center-home/crisis-center-home.component';
import { CrisisDetailedComponent } from './crisis-detailed/crisis-detailed.component';

const crisisRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        // children: [
        //   { path: '', component: CrisisCenterHomeComponent },
        //   { path: 'crisis/:id', component: CrisisDetailedComponent },
        // ]
      },
      { path: ':id', component: CrisisDetailedComponent },
      { path: 'home', component: CrisisCenterHomeComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(crisisRoutes)],
  exports: [RouterModule]
})
export class CrisisCenterRoutingModule { }

I'm puzzled as to why only one nested route is being accepted; it's possible that I am not accessing the routes correctly.

Angular relative routes are failing to function

Answer №1

Answer №2

Similar questions

Synchronously updating the state in Angular using NgRx

Analyzing arrays and object key/value pairs based on a specific value in javascript

Tabs justified are not constrained by width

Tips for hiding a <div> styled as a tooltip in an Angular application when the user clicks elsewhere

Performing an action within the Redux RTK API Slice

What is the best way to invoke a function in a functional React component from a different functional React component?

Getting event properties in a React component using the rest operator: A comprehensive guide

Different Options to Explore Instead of Using @apollo/federation Library

Testing Angular application with a currency pipe results in an error stating "currency

The functionality of router.navigate in Angular 5 seems to be malfunctioning

"Unindexing data in Angular: A step-by-step guide

Creating a unified observable by merging various iterations in RXJS

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

The addition operator is not compatible with the given types

Parent and router-outlet in Angular 4 fashion

Display the spinner until the data is successfully updated in the DOM using Angular

The Angular 4 component's view does not reflect the updates made to the array

Misunderstanding the concept of always being right

Navigating Routes with Router in Angular 7: A Step-by-Step Guide

Difficulty in converting class-based JS useState array to TypeScript Hook