angular 2.コンポーネントを別のコンポーネントに挿入できません。テンプレート解析エラー：...は既知の要素ではありません

Question

別のコンポーネントの中にあるコンポーネントを追加するためにチュートリアルのアクションを繰り返そうとしますが、失敗しています。

プロジェクト構造：

app.component.ts：

import {Component} from "@angular/core" 
import {TodoListComponent} from "./todo-list/todo-list.component" 

.... 
@Component({ 
    moduleId: module.id, 
    selector: "app", 
    templateUrl: "app.component.html", 
    styleUrls: ['app.component.css'], 
    directives:[ TodoListComponent ] 
}) 
export class AppComponent { 
    ... 
} 

app.component.html：

... 
<todo-list ></todo-list> <!--[todos]="todos"--> 
... 

藤堂-list.component .ts

import {Component, Input} from "@angular/core" 
//import {Input} from "../../node_modules/@angular/core/src/metadata/directives"; 

@Component({ 
    selector: "todo-list", 
    templateUrl: "./app/todo/todo-list.component.html" 
}) 
export class TodoListComponent { 
    //@Input() todos:Todo[]; 
} 

TODO-list.component.html

ololololo 

Rmain.ts

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; 

import {AppModule} from "./app.module"; 

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

app.module.ts

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

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

} 

私は、ブラウザを開いて、以下を参照してください。

zone.js:388 Unhandled Promise rejection: Template parse errors: 
'todo-list' is not a known element: 
1. If 'todo-list' is an Angular component, then verify that it is part of this module. 
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">--> 
     [ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"--> 
    </section> 
</main> 
"): AppComponent@14:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
'todo-list' is not a known element: 
1. If 'todo-list' is an Angular component, then verify that it is part of this module. 
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">--> 
     [ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"--> 
    </section> 
</main> 
"): AppComponent@14:8 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:7728:21) 
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17503:53) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:64) 
    at Set.forEach (native) 
    at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:21) 
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17319:21) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 

間違いに私を指すください。チュートリアルを何度か再確認して間違いを見つけられません。

Answer 1

AppComponent宣言からdirectives:[ TodoListComponent ]を除去し、このようなモジュールには、このコンポーネントの宣言を追加：

declarations: [AppComponent, TodoListComponent], 

変更TODO-list.component.tsのURLが

@Component({ 
    selector: "todo-list", 
    templateUrl: "./app/todo-list/todo-list.component.html" 
}) 

Answer 2

に 'フィールドを削除ディレクティブをapp.component.tsに追加し、app.module.tsの宣言で 'TodoListComponent'を追加します。

あなたのapp.module.ts