Angular：component-name 不是已知元素

Posted 2023-02-22

【中文标题】Angular：component-name 不是已知元素

【英文标题】：Angular: component-name is not a known elementAngular：component-name 不是已知元素

【发布时间】：2021-09-02 00:59:41

【问题描述】：

我是 Angular 的新手，我一直遵循 https://angular.io/start 作为指南，但在将数据传递到子组件部分的后半部分遇到了错误。指南给出的最后指示是

要将 ProductAlertsComponent 显示为 ProductListComponent 的子级，请将选择器添加到 product-list.component.html。使用属性绑定将当前产品作为输入传递给组件。

我已经这样做了，并将它添加到我的产品列表组件中。

<app-product-alert [product]="product"></app-product-alert>

但我在我的 stackblitz 窗口上遇到了一个错误，提示“app-alert-component 不是已知元素”。我尝试在 app.module.ts 上导入它，就像这里的答案说 Angular 2 'component' is not a known element 但 stackblitz 窗口只是返回给我一个空白页。

这是我的 app.module.ts

@NgModule(
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([ path: '', component: ProductListComponent ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertComponent
  ],

这是我的 app-alert-component.ts

import  Component, OnInit  from '@angular/core';
import  Input  from '@angular/core';
import  Product  from '../products';

@Component(
  selector: 'app-product-alert',
  templateUrl: './product-alert.component.html',
  styleUrls: ['./product-alert.component.css']
)
export class ProductAlertComponent implements OnInit 
  @Input() product!: Product;
  constructor() 
  ngOnInit() 

如果您能指出我哪里出错的正确方向，我将不胜感激。或者这是文档上的错误，如果是这样，有没有办法通知他们。谢谢。

【问题讨论】：

嗨迈克尔 - 欢迎来到 SO！乍一看，您的代码看起来不错。在那里没有看到任何奇怪的东西。你能分享一下你的 stackblitz 吗？

嗨 :) 这听起来像是一个愚蠢的尝试，但是您是否尝试重新启动 ng serve ？有时，当您使用 AppModule 时，开发服务器并没有完全弄清楚。

嗨@MikeOne，感谢您的热烈欢迎。我找到了我的问题的答案并将其发布为答案。感谢您花时间看我的问题。干杯！

嗨@WillAlexander，这很愚蠢，我刚刚发现它是我问题的答案。谢谢威尔，干杯！

欢迎来到 Angular 开发，我们重新启动开发服务器的方式比我们应该做的要多 ^^

【参考方案1】：

我刚刚找到了答案。

在 app.module.ts 的声明中添加 ProductAlertComponent 是可行的，但您必须在页面上进行刷新。

【讨论】：

我希望这是在入门教程中，它是 Angular 的第一步。 app.module.ts：从 './product-alerts/product-alerts.component' 导入 ProductAlertsComponent ；声明：[AppComponent, TopBarComponent, ProductListComponent, ProductAlertsComponent],