Angular项目添加CRUD路由后出现404页面问题求助

问题根源 #

你的userRoutingModule并非标准Angular路由模块，只是直接导出RouterModule.forChild()的结果，导致主路由无法正确识别子路由配置；同时主路由里存在组件引用错误（导入HomeTableComponent却使用HomeComponent）。

修正步骤 #

1. 重构User路由模块 #

将当前的userRouting文件改为标准NgModule格式：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateComponent } from '../user/create/create.component';
import { EditComponent } from '../user/edit/edit.component';
import { IndexComponent } from '../user/index/index.component';
import { ViewComponent } from '../user/view/view.component';

const routes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'full'},
  { path: 'index', component: IndexComponent },
  { path: ':userId/view', component: ViewComponent },
  { path: 'create', component: CreateComponent },
  { path: ':userId/edit', component: EditComponent } 
];

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

注：去掉路由路径里的user/前缀，子路由会继承主路由加载时的前缀，后续在主路由中指定user前缀即可。

2. 修正AppRoutingModule #

• 修复组件引用错误（将HomeComponent改为HomeTableComponent）
• 配置父路由加载子路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeTableComponent } from './home-table/home-table.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { UserRoutingModule } from './router/userRouting';

const routes: Routes = [
  { path: 'home', component: HomeTableComponent },
  { path: 'user', loadChildren: () => import('./router/userRouting').then(m => m.UserRoutingModule) },
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

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

推荐用loadChildren实现懒加载；若要直接导入UserRoutingModule，需确保子路由路径前缀与主路由配置匹配。

3. 验证组件声明 #

确保CRUD组件（CreateComponent、EditComponent等）已在对应模块（如UserModule）中声明，且该模块导入了UserRoutingModule。

测试访问 #

尝试访问以下路径，应能正常加载对应组件：

• /user/index
• /user/create
• /user/1/view
• /user/1/edit

内容的提问来源于stack exchange，提问作者kiki keke