无法加载Angular2子组件 产品列表组件.ts 我的产品-List.component.html 我的app.module.ts

当我执行此代码（npm start）时，我得到了错误

“ai之星”不是已知元素： 1.如果“ai star”是一个角度组件，则确认它是该模块的一部分

---

如何加载子组件。我正在使用VSCode。

我想您所遇到的错误会像这样继续下去

If 'ai-star' is a Webcomponent then add "CUSTOM_ELEMENTS_SCHEMA" to the NgModule...

因此，您可以尝试这样做-在您的NgModule中，添加

schemas

，如下所示：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [ ... ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // add this!
  bootstrap: [ AppComponent ]
})

---

您可以发布您的html吗？您是否已将

StarComponent

添加到app.module文件中的声明数组中？在html中，除其他外，我正在使用标记。这就是导致错误的原因是我在声明数组中添加了StarComponent。我也提供了它的代码，也许你在这里写代码时只是输入错误，但是

产品列表.component.html

中的这一行

/ai star>

应该是

，好吧，我想至少值得一试：）你能试着在一个容器中重现这个问题吗。对我来说，代码看起来很好，没有明显的跳出。。。

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

@Component({
    selector: 'ai-star',
    templateUrl:'app/shared/start.component.html',
    styleUrls:['app/shared/star.component.css']
})

export class StarComponent implements OnChanges{
    rating : number=4;
    starWidth : number;

    ngOnChanges():void {
        this.starWidth =  this.rating * 86/5;
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';

import { AppComponent }  from '../app.component';
import {ProductListComponent} from '../products/product-list.component';
import {StarComponent} from '../shared/star.component';


@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ AppComponent,
                  ProductListComponent,
                  StarComponent
               ],

  bootstrap: [ AppComponent ]
})
export class AppModule { }

If 'ai-star' is a Webcomponent then add "CUSTOM_ELEMENTS_SCHEMA" to the NgModule...

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [ ... ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // add this!
  bootstrap: [ AppComponent ]
})