Angular 2 directive errors

Question

I am using the final version of Angular 2. I installed the startup file as indicated on the official angular 2 quickstart website . In my app.component.ts file , I created 2 components. The code is shown below: -

    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(){

    }
}

In the my-app component, I used a directive selector, which is an array. But the editor (VS Code) shows an error. The chrome console throws an error saying that Template analysis errors: "demo" is not a known element:

please help me fix this. Thanks

Here is my app.module.ts file

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] ,

a >

Answer 2

directives . NgModule declarations.

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

Answer 3

DemoComponent , declaration:[DemoComponent] AppComponent

FYI: , , @Component ({}) decorator. . , . , , @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 { }