Angular：为何index.html中<create-form>组件无法正常显示？

核心原因 #

Angular应用启动后，只会接管根组件（启动时指定的组件）对应的DOM元素及其内部的内容。你在index.html里把<create-form>放在<my-app>外面，这部分DOM不属于Angular应用的上下文，Angular不会对其进行组件编译和渲染，所以会被当成普通HTML标签忽略。

同时你的代码还存在两个关键错误：

• App类没有@Component装饰器，不是合法的Angular组件，bootstrapApplication(App)的调用本质上无效。
• 混用了NgModule和bootstrapApplication：bootstrapApplication是Angular独立组件模式的启动方法，不需要配置NgModule；如果要用NgModule，应该用platformBrowserDynamic().bootstrapModule(AppModule)启动，而非bootstrapApplication。

解决方法 #

方法一：在根组件模板中引入表单组件 #

这是最常用的方式，将表单组件放在根组件的模板内，让Angular能识别并渲染它：

1. 修改main.ts，把App定义为合法的独立根组件，并引入表单组件：

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { BirdCreateFormComponent } from './create-form/create-form.component';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [BirdCreateFormComponent], // 引入要使用的表单组件
  template: `
    <h1>Hello {{name}}</h1>
    <create-form></create-form> <!-- 在根组件模板中使用表单组件 -->
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

2. 简化index.html，只保留根组件标签：

<body>
  <my-app>Loading...</my-app>
</body>

方法二：直接将表单组件作为根组件启动 #

如果不需要额外的根组件，也可以直接把表单组件设为应用的根组件：

1. 修改main.ts：

import 'zone.js/dist/zone';
import { bootstrapApplication } from '@angular/platform-browser';
import { BirdCreateFormComponent } from './create-form/create-form.component';

// 直接启动表单组件
bootstrapApplication(BirdCreateFormComponent);

2. 修改index.html，使用表单组件的selector作为根标签（注意要和BirdCreateFormComponent中定义的selector一致）：

<body>
  <create-form>Loading...</create-form>
</body>

补充说明 #

• Angular的组件只能在Angular组件的模板（或通过路由加载）中使用，不能直接放在index.html的根组件标签外，因为这部分DOM不在Angular的管控范围内。
• 独立组件模式是Angular 14+推荐的方式，无需配置NgModule，通过standalone: true标记组件，并在imports数组中引入依赖组件即可。

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