Ошибка угловых 2 директив

Question

Я использую окончательную версию версии Angular 2. Я установил файл запуска, как указано на официальном сайте angular 2 quickstart. В моем файле app.component.ts я сделал 2 компонента. Код показан ниже: -

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

@Component({ 
    selector: 'demo', 
    template:` 
     <h2>Hi, demo !!</h2> 
    ` 
}) 

export class DemoComponent implements OnInit{ 
    constructor(){} 

    ngOnInit(){ 

    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular 2 App</h1> 
    <demo></demo> 
    ` 

}) 
export class AppComponent implements OnInit{ 
    constructor(){} 
    ngOnInit(){ 

    } 
} 

В компоненте моего приложения я использовал директиву селектор, который является массивом. Но редактор (VS Code) показывает ошибку. Консоль хром бросает ошибку, говоря, что шаблона ошибки разбора: «демо» не является известным элементом:

пожалуйста, помогите мне исправить это. Спасибо

Вот мой app.module.ts файла

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [AppComponent, DemoComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

Вы должны определить свой компонент в declarations свойства модуля.

app.module.ts

import { AppComponent, DemoComponent } from './app.component'; 

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

и удалить его из directives имущества AppComponent. Он устарел.

app.component.ts

directives: [DemoComponent] , 

Answer 2

directives устарела. Создайте NgModule и добавьте его в declarations.

https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 3

Вы должны объявить DemoComponent в массиве декларации и убедитесь, что вы удалите declaration:[DemoComponent] из AppComponent

FYI: объявляя трубы, компонент, директивы в директивах метаданных @Component ({}) были удалены. эта декларация больше не существует. Таким образом, вы столкнулись с некоторыми проблемами. Вам нужно объявить трубы, директивы, компоненты в декораторе @NgModule ({}).

, если есть в том же файле вы должны импортировать его как import { AppComponent,DemoComponent} from './app.component';

import {DemoComponent} from 'valid path';    //<<===here 
OR 
import {AppComponent, DemoComponent} from './app.component'; //<<===here 


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