Angular mat-menu-item routerLink returning 404 File not found error

Question

I am working with an Angular 12 project in Visual Studio 2019 (still a newbee with Angular). I am trying to change a mat-menu-item to navigate to a new component, and I'm getting a Failed to Load Resource error.

The project currently has routing to a component that for this post I've renamed Parent. It lives in: ClientApp/src/app/parent. The code is pretty simple even with the reduced code I'm showing.

In my parent.component.ts file:

import { Component} from '@angular/core';
@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
  })
export class ParentComponent {
  constructor( ) {  }
}

The parent.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentComponent } from "./parent.component";

@NgModule({
    imports: [
      RouterModule.forChild([
        {
          path: 'parent',
          component: ParentComponent,
        }])
    ],
    declarations: [
      ....
      ParentComponent
    ]
  })
export class ParentModule {}

In app.module.ts (ignore CustomerModule for a moment):

In my app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
.......
import { ParentModule } from "./parent/parent.module";
import { CustomerModule } from "./parent/customer/customer.module";

@NgModule({
  declarations: [
    AppComponent,
    .....    
  ],
  imports: [
    ......
    ParentModule,
    CustomerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

My app.component.html references a navigation component, and that contains

And this all works fine, I get navigation to parent. I should add that ParentModule is only referenced in the files I've indicated above. I then added a customer component beneath the parent component and changed routerLink to be

But this produces the 404 error: Failed to load resource: the server responded with a status of 404 (Not Found). Changing routeLink to [routerLink]="['/customer']" produces the same error.

customer is in app.module.ts, see previous. Here is the code (not showing html file) for customer.component.ts file::

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'customer',
  templateUrl: './customer.component.html'
})
export class CustomerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

and for customer.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CustomerComponent } from "./customer.component";

@NgModule({
  declarations: [CustomerComponent],
  imports: [
    RouterModule.forChild(
      [
        {
          path: 'customer',
          component: CustomerComponent
        }]
      )
  ]
})
export class CustomerModule { }

But as I said this does not route when the link is clicked, I only get the 404 error in the browser window, and the VS19 output window says the same. What am I missing that is causing this error? Thanks in advance for any assistance.

EDIT---- I was able to something to work, close to what I want to do, by doing three things:

Placing my customer component folder in the parent component folder.
Removing file CustomerModule and its reference in app.module.ts.
Making the following additions in the parent module:

import { CustomerComponent } from "./parent/customer.component";
....
    imports: [
      RouterModule.forChild([
        {
          path: 'parent',
          component: ParentComponent,
        },
        {
          path: 'parent/customer',
          component: CustomerComponent,
        }])
    ],

user_10634115 · Answer

In your parent.module.ts do:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentComponent } from "./parent.component";

@NgModule({
    imports: [
      RouterModule.forChild([
        {
          path: 'parent',
          component: ParentComponent,
          children: [
          {
             path:'customer', component: CustomerComponent
          },
        }])
    ],
    declarations: [
      ....
      ParentComponent
    ]
  })
export class ParentModule {}

And I guess you can remove the customer.module.ts if it is only used for routing. As additional reference you can use: https://www.telerik.com/blogs/angular-basics-setting-up-child-routes-angular-12#:~:text=In%20Angular%2C%20the%20router%20lets,property%20inside%20the%20routing%20module.&text=Here%20you%20can%20see%20that,of%20them%20wherever%20we%20go.

I would suggest looking into writing "route" components and how to integrate them to your "module" components, it will make your code much easier to understand and it would be more structured.

user_4604645 · Answer

Using RouterModule.forChild you are creating a route configuration on the same router service as the root one, but not under the "parent" the term child is ambiguous here...

So your route is currently configured as /customer not /parent/customer

To fix it, you need do configure child routes explicitly.

on your child router, export the route configs:

export const childRoutes: Routes = [
  {
    path: 'customer',
    component: CustomerComponent
  }
];

Then from your parent's route config you use that variable to configure the child routes:

const parentRoutes: Routes = {
 path: 'parent',
 children: [
   // (other child routes),
   ...childRoutes,
 ],
 // (other configs)
}

Angular mat-menu-item routerLink returning 404 File not found error

2 Answers