Angular独立组件（Stand Alone Components）使用疑问：如何在bootstrapApplication中引入自定义header组件

嘿，作为Angular新手遇到这种问题太正常啦，咱们一步步拆解解决～

首先先指出你当前代码里的几个小问题，再给你两种可行的解决方案：

先修正header组件的小错误 #

你的header组件里写了imports: [Headers]，这里的Headers是HttpClient相关的类，和组件渲染完全无关，而且你也没导入它，会直接报错。把这行改成空数组就好：

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

@Component({
  selector:'app-header',
  standalone: true,
  imports: [], // 空数组即可，因为当前模板没有依赖其他组件/指令
  template:'<h2>app-header</h2>',
})
export class headerComponent{}

为什么你原来的方式不生效？ #

你在index.html里直接写了<app-header></app-header>，但bootstrapApplication(AppComponent, appConfig)只告诉Angular要启动AppComponent作为根组件，Angular只会识别这个根组件及其导入的组件，所以<app-header>不在Angular的组件树里，自然不会被渲染。

解决方案一：把Header作为AppComponent的子组件（最常用） #

这种方式最符合Angular的组件树逻辑，只需要修改AppComponent，把Header组件导入并添加到它的imports数组里，然后在AppComponent的模板里使用<app-header>：

修改后的AppComponent代码：

import { Component } from "@angular/core";
import { RouterOutlet } from '@angular/router';
import { headerComponent } from './header/header.component'; // 导入header组件

@Component({
  selector:'app-root',
  standalone: true,
  imports: [RouterOutlet, headerComponent], // 把header加入到依赖导入里
  template:`
    <app-header></app-header>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent{}

然后把index.html里的<app-header></app-header>删掉，只保留<app-root></app-root>就可以了，Header会作为AppComponent的子组件被渲染出来。

解决方案二：创建根容器组件，同时包含Header和AppComponent #

如果你确实想在index.html里同时放多个组件，可以创建一个专门的根容器组件，把Header和AppComponent都导入进去，然后启动这个容器组件：

1. 新建root-container.component.ts：

import { Component } from "@angular/core";
import { AppComponent } from './app.component';
import { headerComponent } from './header/header.component';

@Component({
  selector: 'app-root-container',
  standalone: true,
  imports: [headerComponent, AppComponent],
  template:`
    <app-header></app-header>
    <app-root></app-root>
  `,
})
export class RootContainerComponent {}

2. 修改main.ts里的启动代码：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { RootContainerComponent } from './app/root-container.component';

bootstrapApplication(RootContainerComponent, appConfig )
.catch((err) => console.error(err));

3. 最后把index.html里的内容改成：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularEkart</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root-container></app-root-container>
</body>
</html>

这样Angular启动根容器组件后，就会渲染里面的Header和AppComponent啦～

备注：内容来源于stack exchange，提问作者Ahmed Alaa