Angular嵌套路由显示空白页问题求助

问题背景 #

我需要在Angular中实现嵌套路由流程：用户进入shop页面添加商品至购物车，完成后进入结账页面。当前配置了嵌套路由，但访问http://127.0.0.1:4200/shop/cart或http://127.0.0.1:4200/shop/cart/checkout时页面空白，访问/shop正常，非嵌套路由也能正常工作，控制台显示组件相关错误。

当前配置代码 #

app-routing-module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { CartComponent } from './shop/cart/cart.component';
import { CheckoutComponent } from './shop/cart/checkout/checkout.component';
import { ShopComponent } from './shop/shop.component';

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'contact', component: ContactComponent},
  {
    path: 'shop', 
    component: ShopComponent,
    children: [
      {
        path: 'cart', component: CartComponent,
        children: [
          {path: 'checkout', component: CheckoutComponent},
        ]
      },
    ]
  },
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent},
  {path: '**', pathMatch:'full', component: PageNotFoundComponent},
];

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

export class AppRoutingModule {}

shop.component.html

<div>
    <!--shop content here-->
</div>
<router-outlet></router-outlet>

cart.component.html

<div>
    <!-- cart content here-->
</div>
<router-outlet></router-outlet>

问题原因与修复方案 #

1. 组件未在模块中声明（核心问题） #

控制台错误提示显示Angular无法识别CartComponent和CheckoutComponent，这是因为这些组件没有被添加到对应模块的declarations数组中。

修复方法：
如果使用子模块（如ShopModule），打开shop.module.ts添加组件声明：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './cart/checkout/checkout.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent // 必须添加到此处
  ],
  imports: [
    CommonModule,
    RouterModule
  ]
})
export class ShopModule { }

若直接在AppModule中使用这些组件，将它们添加到AppModule的declarations数组即可。

2. 清理路由配置冗余 #

路由配置中重复声明了path: 'contact'，删除其中一个即可：

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'contact', component: ContactComponent}, // 保留一个即可
  {
    path: 'shop', 
    component: ShopComponent,
    children: [
      {
        path: 'cart', component: CartComponent,
        children: [
          {path: 'checkout', component: CheckoutComponent},
        ]
      },
    ]
  },
  {path: 'about', component: AboutComponent},
  {path: '**', pathMatch:'full', component: PageNotFoundComponent},
];

3. 验证路由跳转路径 #

确保跳转时使用正确的路径：

• 从ShopComponent跳转到购物车：使用<a routerLink="/shop/cart">查看购物车</a>
• 从CartComponent跳转到结账：使用<a routerLink="checkout">去结账</a>（相对路径，基于当前/shop/cart路由）

4. 确认<router-outlet>位置 #

当前shop.component.html和cart.component.html中的<router-outlet>位置正确，父组件的<router-outlet>会负责渲染子路由组件，这部分无需修改。

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