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

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

<button mat-menu-item [routerLink]="['/parent']">The Parent</button>

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

<button mat-menu-item [routerLink]="['/parent/customer']">The Customer</button>

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.

CodePudding user response：

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 Angular, the router lets,property inside the routing module.&text=Here you can see that,of them wherever we go.

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.

CodePudding user response：

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)
}