Angular JS/18混合应用客户路由迁移后子组件无法渲染

问题排查与修复步骤 #

1. 移除独立组件中不必要的路由模块导入 #

SideMenuComponent作为独立组件，无需导入CustomerRoutingModule，这会引发路由注册冲突。修改组件的imports数组：

@Component({
  selector: 'app-side-menu',
  standalone: true,
  imports: [
    HeaderComponent, 
    MenuComponent, 
    FooterComponent, 
    MatSidenavModule, 
    RouterModule, 
    CommonModule // 移除CustomerRoutingModule
  ],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.less'
})
export class SideMenuComponent {
  open: boolean = false;
}

2. 确保客户路由被正确注册到应用主路由 #

有两种方式完成路由注册：

方式一：合并到主路由配置

在AppRoutingModule中导入customerRoutes并合并到routes数组：

import { Routes, RouterModule } from '@angular/router';
import { customerRoutes } from './path-to-customer-routes';

const appRoutes: Routes = [
  // 其他应用路由
  ...customerRoutes // 合并客户路由
];

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

方式二：通过路由模块导入

如果使用CustomerRoutingModule，确保它配置正确并被主模块导入：

// customer.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { customerRoutes } from './customer.routes';

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

然后在AppModule中导入该路由模块：

@NgModule({
  imports: [
    // 其他模块
    CustomerRoutingModule
  ]
})
export class AppModule { }

3. 验证HomeComponent的配置 #

如果HomeComponent是独立组件，确保它的配置正确：

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule], // 按需添加其他依赖模块
  templateUrl: './home.component.html'
})
export class HomeComponent { }

如果是NgModule组件，确保它所在的模块已被正确导入到应用中。

4. 检查路由匹配优先级 #

确保没有其他路由规则优先匹配customer/home路径，比如通配符路由(**)要放在路由配置的最后。

完成以上步骤后，重启应用，访问customer/home即可正确渲染Home组件。

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