Angular懒加载Shop模块路由无法渲染问题求助

你的问题出在shop-routing.module.ts的路由配置上，这里形成了循环加载，而且没有指定实际要渲染的组件，导致导航到/shop时页面空白。

修复步骤： #

1. 修正Shop模块的路由配置
   把shop-routing.module.ts里的循环加载逻辑替换成指向具体组件的配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 这里引入你要在shop路径下展示的组件，比如你提到的LandingComponent，或者Shop模块自身的组件
import { LandingComponent } from '../landing/landing.component';

const routes: Routes = [
  {
    path: '',
    component: LandingComponent // 替换为你实际需要渲染的组件
  },
];

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

2. 确保Shop模块声明了内部组件（如果使用模块内组件）
   如果你的Shop模块有自己的专属组件（比如ShopComponent），需要在shop.module.ts中声明它：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component'; // 引入自定义组件

@NgModule({
  declarations: [ShopComponent], // 声明组件
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

问题原因说明： #

• app.routes.ts中懒加载ShopModule的写法是正确的，但shop-routing.module.ts里的path: ''又去加载ShopModule，导致Angular陷入循环加载，却没有任何组件被挂载到页面上，所以出现空白且无报错的情况。
• 懒加载子路由的正确逻辑是：父路由（/shop）负责加载子模块，子模块的路由配置需要处理该路径下的具体组件渲染，而不是再次加载自身模块。

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