title: angular 2. Cannot insert one component to another. Template parse errors:...is not a known element
body: <p>I try to repeat actions from tutorial for adding one component inside another but I am failing.</p>
  
  <p>project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/wmfWC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wmfWC.jpg" alt="enter image description here"></a></p>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>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 {
     ...
  }
  </code></pre>
  
  <p>app.component.html:</p>
  
  <pre><code>...
  &lt;todo-list &gt;&lt;/todo-list&gt; &lt;!--[todos]="todos"--&gt;
  ...
  </code></pre>
  
  <p><strong>todo-list.component.ts</strong></p>
  
  <pre><code>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[];
  }
  </code></pre>
  
  <p><strong>todo-list.component.html</strong></p>
  
  <pre><code>ololololo
  </code></pre>
  
  <p><strong>Rmain.ts</strong></p>
  
  <pre><code>import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
  
  import {AppModule} from "./app.module";
  
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>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 {
  
  }
  </code></pre>
  
  <p>I open browser and see following:</p>
  
  <pre><code>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 }"&gt;--&gt;
          [ERROR -&gt;]&lt;todo-list &gt;&lt;/todo-list&gt; &lt;!--[todos]="todos"--&gt;
      &lt;/section&gt;
  &lt;/main&gt;
  "): AppComponent@14:8 ; Zone: &lt;root&gt; ; 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 }"&gt;--&gt;
          [ERROR -&gt;]&lt;todo-list &gt;&lt;/todo-list&gt; &lt;!--[todos]="todos"--&gt;
      &lt;/section&gt;
  &lt;/main&gt;
  "): 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
  </code></pre>
  
  <p>Please point me to the mistake. I rechecked tutorial several times and cannot find mistake.</p>