Angular入门教程「传递数据到子组件」步骤报错求助

错误原因 #

你遇到的报错是因为ProductAlertsComponent是独立组件（standalone: true），这类组件是Angular 14+的新特性，不需要在NgModule的declarations数组中声明——强行添加就会触发TS-996008错误。

StackBlitz的默认Angular模板会启用独立组件模式，而官方教程的生成逻辑可能默认生成非独立组件，所以出现了教程和实际操作的差异。

解决方案 #

有两种可行的解决方式，按需选择：

方式1：保留独立组件模式（推荐） #

1. 先从AppModule的declarations数组中移除ProductAlertsComponent：

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent
    // 删掉ProductAlertsComponent
  ],

2. 分场景处理组件导入：
   • 若使用该组件的是独立组件（比如ProductListComponent）：
     在product-list.component.ts中导入并添加到组件的imports数组：

     import { ProductAlertsComponent } from '../product-alerts/product-alerts.component';
     
     @Component({
       selector: 'app-product-list',
       templateUrl: './product-list.component.html',
       styleUrls: ['./product-list.component.css'],
       standalone: true,
       imports: [ProductAlertsComponent] // 加到这里
     })
     

   • 若使用该组件的是非独立组件（属于AppModule）：
     在AppModule的imports数组中添加该组件：

     @NgModule({
       declarations: [
         AppComponent,
         TopBarComponent,
         ProductListComponent
       ],
       imports: [
         BrowserModule,
         ProductAlertsComponent // 加到这里
       ],
       // 其他配置（比如bootstrap）
     })
     

方式2：将组件改为非独立模式 #

打开product-alerts.component.ts，把standalone: true改为false：

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css'],
  standalone: false // 修改这里
})

修改后，你之前手动添加到AppModule的declarations数组的代码即可正常工作。

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