Ошибка анализа шаблона при добавлении нового компонента?

Question

Я получаю ошибку анализа синтаксиса шаблона. Я просто добавляю новый component в основной компонент component.why?

вот мой код

http://plnkr.co/edit/Dqr2n0rx3LODKt4NPUwk?p=preview

ошибка

**zone.js@0.6.17:484 Unhandled Promise rejection: Template parse errors: 
'todo-input' is not a known element: 
1. If 'todo-input' is an Angular component, then verify that it is part of this module. 
2. If 'todo-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<div><h1>My First </h1>[ERROR ->]<todo-input></todo-input></div>"): AppComponent@0:23 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
'todo-input' is not a known element: 
1. If 'todo-input' is an Angular component, then verify that it is part of this module. 
2. If 'todo-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<div><h1>My First </h1>[ERROR ->]<todo-input></todo-input></div>"): AppComponent@0:23 
    at TemplateParser.parse (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:8525:21) 
    at RuntimeCompiler._compileTemplate (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16879:53) 
    at eval (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16802:85) 
    at Set.forEach (native) 
    at compile (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16802:49) 
    at ZoneDelegate.invoke (https://unpkg.com/zone.js@0.6.17?main=browser:332:29) 
    at Zone.run (https://unpkg.com/zone.js@0.6.17?main=browser:225:44) 
    at https://unpkg.com/zone.js@0.6.17?main=browser:591:58 
    at ZoneDelegate.invokeTask (https://unpkg.com/zone.js@0.6.17?main=browser:365:38) 
    at Zone.runTask (https://unpkg.com/zone.js@0.6.17?main=browser:265:48)consoleError @ zone.js@0.6.17:484 
zone.js@0.6.17:486 Error: Uncaught (in promise): Error: Template parse errors:(…)** 

Я просто добавить новый компонент этого

import {Component} from "@angular/core"; 
@Component({ 
    selector :'todo-input', 
    template:'<input type="text"/>' 
}) 

export class Todo {} 

Answer 1

Рабочая Демо: http://plnkr.co/edit/eCRqpEzvMicKpiXdD1gp?p=preview

Просто сдвинуты todo.input.ts, чтобы приложение папку

Затем импортирован Todo компонент и объявить его в @ деклараций NgModule в метаданных, как показано ниже,

import {Todo} from './todo.input';  //<----added this line 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent,Todo], //<----added Todo 
    bootstrap: [ AppComponent ] 
})