Angular模块与组件报错求助：NG0906错误如何解决

问题背景 #

我正在学习Angular数据绑定概念，使用StackBlitz进行练习。项目包含main.ts、binding目录下的binding.module.ts、binding.component.ts及对应的HTML/CSS文件。我的HTML文件中有一个<p>标签，内容为binding works!，但运行时出现如下错误：

Error: NG0906: The BindingModule is not an Angular component, make sure it has the @Component decorator.

现有代码 #

main.ts #

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingModule } from './binding/binding.module';

bootstrapApplication(BindingModule);

binding.module.ts #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BindingComponent } from './binding.component';

@NgModule({
  imports: [CommonModule, BrowserModule],
  declarations: [BindingComponent],
  bootstrap: [BindingComponent],
})
export class BindingModule {}

binding.component.ts #

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

@Component({
  selector: 'app-binding',
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css']
})
export class BindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

错误原因 #

bootstrapApplication是Angular独立组件模式的启动方法，它要求传入的是带有@Component装饰器的组件类，而你传入的是BindingModule（模块类，带@NgModule装饰器），因此触发NG0906错误。

解决方法 #

有两种可行的修改方案，可根据项目模式选择：

方案一：使用模块式启动（保留现有模块） #

修改main.ts，改用Angular传统的模块引导方式，使用platformBrowserDynamic启动模块：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'zone.js';
import { BindingModule } from './binding/binding.module';

platformBrowserDynamic().bootstrapModule(BindingModule);

方案二：使用独立组件模式（移除模块依赖） #

如果不需要模块，直接用bootstrapApplication启动组件：

1. 修改main.ts，传入BindingComponent：

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingComponent } from './binding/binding.component';

bootstrapApplication(BindingComponent);

2. （可选）若无需BindingModule，可直接删除该文件。

验证修改 #

修改完成后重新运行项目，HTML中的<p>标签内容应能正常显示，错误将被修复。

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