Angular 17懒加载失效求助：访问/admin路径跳转至/且无内容

1. 移除非法空路由对象 #

在admin-routing.module.ts的路由数组中，末尾的空对象{}属于无效配置，会导致Angular路由解析失败，直接触发根路由的重定向规则（跳转到/login）。

修改后的admin-routing.module.ts路由配置：

const routes: Routes = [
  {path: "", component: AdminDashboardComponent, children: [
    {path: 'contacts', component: ContactsComponent},
    {path: 'contacts/user/:id', component: ContactsDetailsComponent},
    {path: 'home', component: HomeComponent},
  ]}
];

2. 在AdminModule中声明组件 #

当前admin.module.ts的declarations数组为空，你在路由中使用的AdminDashboardComponent、ContactsComponent等组件未被该模块声明，Angular无法识别并渲染这些组件。

修改后的admin.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
// 导入所有用到的组件
import { AdminDashboardComponent } from './Components/admin-dashboard/admin-dashboard.component';
import { ContactsComponent } from './Components/contacts/contacts.component';
import { ContactsDetailsComponent } from './Components/contacts-details/contacts-details.component';
import { HomeComponent } from './Components/home/home.component';

@NgModule({
  declarations: [
    AdminDashboardComponent,
    ContactsComponent,
    ContactsDetailsComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule,
  ]
})
export class AdminModule { }

3. 可选：添加默认子路由优化体验 #

当前访问/admin时，会加载AdminDashboardComponent，但子路由无默认项可能导致页面内容为空。可在子路由中添加默认重定向：

{path: "", component: AdminDashboardComponent, children: [
  {path: '', redirectTo: 'home', pathMatch: 'full'}, // 添加默认重定向
  {path: 'contacts', component: ContactsComponent},
  {path: 'contacts/user/:id', component: ContactsDetailsComponent},
  {path: 'home', component: HomeComponent},
]}

这样访问/admin时会自动跳转到/admin/home，显示HomeComponent内容。

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