Angular 2 - MEAN MongoDB NodeJS

Question

我正在使用这个 GitHub 示例 (https://github.com/bradtraversy/mean_mytasklist)，到目前为止它运行良好。我看到我的MongoDB的任务，可以添加、删除任务。

然后我尝试添加一个新组件“标题”

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 未处理的承诺拒绝：模板解析错误： 'headers' 不是已知元素： 1. 如果 'headers' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'headers' 是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 (" [错误->]

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

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

"): AppComponent@1:4 ; 区域: ; 任务: Promise.then ;

Answer 1

您使用的是哪个版本的 Angular 2 并且您没有使用 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 ] 
})