Angular 17独立组件路由异常：Home页面内容无法显示

核心问题分析 #

你的HomePage组件及子组件无法显示，主要是路由未正确配置，其次可能存在组件定义不完整的情况，具体如下：

1. 未配置路由映射 #

你在app.component.html中使用了<router-outlet>和routerLink="homePage"，但没有为HomePageComponent配置对应的路由规则，导致Angular无法识别该路由，自然不会渲染组件。

2. HomePageComponent导入冗余（非致命，但不符合规范） #

在app.component.ts中你直接导入了HomePageComponent，但因为是通过路由加载组件，而非直接在模板中使用<app-home-page>标签，所以这个导入是多余的，可以移除。

3. HomePageActionsCardComponent定义不完整 #

你只提供了该组件的模板代码，未给出对应的.ts文件，需要确保它是独立组件，且selector正确设置为app-home-page-actions-card。

修复步骤 #

步骤1：添加路由配置 #

在你的项目根路由配置文件（通常是app.routes.ts）中，添加HomePageComponent的路由映射：

import { Routes } from '@angular/router';
import { HomePageComponent } from './path-to-your-home-page/home-page.component'; // 替换为实际路径

export const routes: Routes = [
  { path: 'homePage', component: HomePageComponent },
  { path: '', redirectTo: 'homePage', pathMatch: 'full' }, // 可选：默认跳转到HomePage
];

同时确保在main.ts中正确启用路由：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

步骤2：修正app.component.ts的导入 #

移除冗余的HomePageComponent导入：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    CommonModule, 
    HeaderComponent, 
    FooterComponent, 
    SidenavComponent, 
    RouterModule // 保留RouterModule即可
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {}

步骤3：确保HomePageActionsCardComponent是独立组件 #

创建或完善home-page-actions-card.component.ts，确保它是standalone组件且selector正确：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home-page-actions-card',
  standalone: true,
  imports: [], // 若需要其他模块（如CommonModule）请添加
  templateUrl: './home-page-actions-card.component.html',
  styleUrl: './home-page-actions-card.component.scss'
})
export class HomePageActionsCardComponent {}

验证修复 #

完成上述步骤后，重新启动项目：

1. 点击页面上的Home链接，路由会跳转到/homePage
2. <router-outlet>位置会渲染HomePageComponent，进而加载HomePageActionsCardComponent，显示"Hello There!"内容

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