user944513 user944513 - 2 months ago 266
AngularJS Question

template parsing error while adding new component?

I am getting template parsing error .I just add new

component
in main component.why ?

here is my code

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

error

**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:(…)**


I just add new component this

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

export class Todo {}

Answer

Working Demo: http://plnkr.co/edit/eCRqpEzvMicKpiXdD1gp?p=preview

Just shifted todo.input.ts in to app folder

Then, imported Todo component and declare it within @NgModule's declarations metadata as shown below,

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

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