Angular mat-menu-item routerLink 返回 404 找不到文件错误

Question

我在 Visual Studio 2019 年与 Angular 12 项目合作（仍然是 Angular 的新手）。我正在尝试更改 mat-menu-item 以导航到新组件，但出现无法加载资源错误。

该项目目前路由到一个组件，为此 post 我已将其重命名为 Parent。它住在：ClientApp/src/app/parent。即使使用我显示的简化代码，代码也非常简单。

在我的 parent.component.ts 文件中：

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

parent.module.ts 文件：

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

在app.module.ts中（暂时忽略CustomerModule）：

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

我的 app.component.html 引用了一个导航组件，其中包含

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

这一切都很好，我可以导航到父级。我应该补充一点，ParentModule 仅在我上面指出的文件中被引用。然后我在父组件下面添加了一个客户组件并将 routerLink 更改为

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

但这会产生 404 错误：无法加载资源：服务器响应状态为 404（未找到）。将 routeLink 更改为 [routerLink]="['/customer']" 会产生相同的错误。

客户在 app.module.ts，请参阅上一条。这是 customer.component.ts 文件::

的代码（未显示 html 文件）

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

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

  constructor() { }

  ngOnInit(): void {
  }
}

对于 customer.module.ts 文件：

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

但正如我所说，单击 link 时不会路由，我只在浏览器中收到 404 错误 window，而 VS19 输出 window 表示相同.我错过了什么导致这个错误？在此先感谢您的帮助。

编辑---- 通过做三件事，我能够做一些接近我想做的事情：

将我的客户组件文件夹放在父组件文件夹中。
正在删除文件 CustomerModule 及其在 app.module.ts 中的引用。
在父模块中添加以下内容：

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

Answer 1

在你的 parent.module.ts 中做：

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

我想如果 customer.module.ts 仅用于路由，您可以删除它。作为附加参考，您可以使用：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.

我建议研究编写“路由”组件以及如何将它们集成到您的“模块”组件中，这将使您的代码更容易理解并且更有条理。

Answer 2

使用 RouterModule.forChild，您在与根路由器服务相同的路由器服务上创建路由配置，但不在“parent”下，术语 child 在这里不明确。 .

因此您的路线当前配置为 /customer 而不是 /parent/customer

要修复它，您需要明确配置 child 路由。

在您的 child 路由器上，导出路由配置：

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

然后从 parent 的路由配置中使用该变量来配置 child 路由：

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

Angular mat-menu-item routerLink 返回 404 找不到文件错误

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

angular

angular-router