Question

我正在使用这个GitHub示例（https://github.com/bradtraversy/mean_mytasklist），到目前为止一切正常。我看到我的MongoDB的任务，可以添加，删除任务。

然后我试图添加一个新组件＆＃34;标题＆＃34;

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'headers',
  templateUrl: 'header.component.html'
})
export class HeaderComponent {

}

我在app.modules.ts

中添加了这个组件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TasksComponent } from './components/tasks/tasks.component';
import { HeaderComponent } from './components/header/header.component';

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

在我的app.component.html中，我正在使用此选择器。

<div class="container">
    <headers></headers>
    <h1>MyTaskList</h1>
    <hr>
    <tasks></tasks>
</div>

刷新浏览器后，我会收到以下错误消息：

zone.js：420未处理的承诺拒绝：模板解析错误：＆＃39;头＆＃39;不是一个已知的元素： 1.如果＆＃39;标题＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃39;标题＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34; [错误 - ＆gt;]

<headers></headers>
<h1>MyTaskList</h1>
<hr>

有什么想法吗？非常感谢!!!

＆＃34;）：AppComponent @ 1：4;区域：;任务：Promise.then;

Answer 1

您正在使用哪个版本的Angular 2＆amp;你没有使用webpack进行构建吗？

错误控制台本身提到了解决方案。你需要添加

schemas: [CUSTOM_ELEMENTS_SCHEMA ]

所以你的app.module.ts应该是这样的，

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [BrowserModule, HttpModule, FormsModule],
  declarations: [AppComponent, TasksComponent, HeaderComponent],
  bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA ] 
})

Angular 2 - MEAN MongoDB NodeJS

1 个答案: