在angular2中获取“'组件'不是已知元素”错误

Question

我的Angular 2应用程序中有两个组件。 AppComponent使用MyComponent ：

app.component.ts：

import { Component } from '@angular/core';
import { MyComponent } from './comp1/app.component2';

@Component({
    selector: 'my-app',
    directives: [MyComponent],
    template: `
      <h1>My First Angular 2 App</h1>  <h2>Welcome all!!!!</h2>

      <a href="http://google.co.in/">Google</a><br/><a href="http://www.facebook.com/">facebook</a><br/><a href="http://www.twitter.com">twitter</a>

      <ul><li *ngFor="let name of names">{{name}}</li></ul>

      <my-comp></my-comp>`
})
export class AppComponent {
    names: String[];
    constructor() {
        this.names = ["Praveen", "Naveen", "Nandini"];
    }
}

---

app.component2.ts：

import {Component} from '@angular/core'
@Component({
    selector: 'my-comp',
    templateUrl: 'app/comp1/my-component.html'
})
export class MyComponent {
    msg: String = "My Component ---- hurrayyyyyy!!!!!!";
}

---

app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

---

当我运行它时，我收到以下错误：

控制台出错：

Unhandled Promise rejection: Template parse errors:
'my-comp' is not a known element:
1. If 'my-comp' is an Angular component, then verify that it is part of this module.
2. If 'my-comp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (".com">twitter</a>
              <ul><li *ngFor="let name of names">{{name}}</li></ul>
              [ERROR ->]<my-comp></my-comp>
"): AppComponent@4:14 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'my-comp' is not a known element:
1. If 'my-comp' is an Angular component, then verify that it is part of this module.
2. If 'my-comp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (".com">twitter</a>
              <ul><li *ngFor="let name of names">{{name}}</li></ul>
              [ERROR ->]<my-comp></my-comp>
"): AppComponent@4:14 {stack: (...), message: "Template parse errors:↵'my-comp' is not a known el…RROR ->]<my-comp></my-comp>↵"): AppComponent@4:14"}

我该如何解决这个问题？

Answer 1

您需要在app.module文件中导入和声明MyComponent ，如下所示，

注意 ：还从AppComponent中删除指令：[MyComponent]

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { MyComponent } from './comp1/app.component2';  //<----here

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,MyComponent],           //<-----here
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 2

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  schemas:      [CUSTOM_ELEMENTS_SCHEMA] // <<<=== add this line
})
export class AppModule { }