angular 2. Cannot insert one component to another. Template parse errors:...is not a known element

Question

I try to repeat actions from tutorial for adding one component inside another but I am failing.

project structure:

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"-->
...

todo-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 {

}

I open browser and see following:

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

Please point me to the mistake. I rechecked tutorial several times and cannot find mistake.

Possible duplicate of [Angular2 RC6: ' is not a known element'](http://stackoverflow.com/questions/39333739/angular2-rc6-component-is-not-a-known-element) — Joel Almeida, Dec 13 '16 at 09:36
@Joel Almeida If I understood you correct **Rmain.ts** contains this onformation — gstackoverflow, Dec 13 '16 at 09:39
You have to move your directive to `declarations` array of your @NgModule http://stackoverflow.com/questions/39454379/angular-2-directives-argument-of-type-is-not-assignable-to/39454416#39454416 — yurzui, Dec 13 '16 at 09:45
@yurzui, Now that error disappered but I see zone.js:1382 GET http://localhost:3000/app/todo/todo-list.component.html 404 (Not Found). although if replace **.../app/todo/todo-list...** with **,,,/app/todo-list/todo-list....*** it will work — gstackoverflow, Dec 13 '16 at 09:53
Check out this answer http://stackoverflow.com/questions/39503805/zone-js344-unhandled-promise-rejection-failed-to-load-app-template-html-in-ang/39504168#39504168 — yurzui, Dec 13 '16 at 09:54

score 1 · Accepted Answer · edited Dec 13 '16 at 09:59

1

remove directives:[ TodoListComponent ] from AppComponent declaration and add declaration of this component to module like this:

declarations: [AppComponent, TodoListComponent],

Change the Url of todo-list.component.ts to

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

edited Dec 13 '16 at 09:59

gstackoverflow

36,709
117
359
710

answered Dec 13 '16 at 09:56

raj m

1,863
6
21
37

score 1 · Answer 2 · answered Dec 13 '16 at 10:00

remove the field 'directives' in app.component.ts and add 'TodoListComponent' in declarations at app.module.ts

your app.module.ts

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

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

}

angular 2. Cannot insert one component to another. Template parse errors:...is not a known element

2 Answers2