Question

我收到模板解析错误。我只是在主要组件中添加新的component。

这是我的代码

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 移至 app文件夹

然后，导入 Todo 组件，在 @ NgModule的声明元数据中声明，如下所示，

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

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

添加新组件时模板解析错误？

1 个答案: