Angular 2 - MEAN MongoDB NodeJS

我使用这个GitHub的例子（https://github.com/bradtraversy/mean_mytasklist），它迄今为止工作正常。我看到我的MongoDB的任务，可以添加，删除任务。Angular 2 - MEAN MongoDB NodeJS

然后我试图添加新的组件“头”

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

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

任何想法非常感谢!!!

”）：AppComponent @ 1：4;区域：;任务：Promise.then;

来源

2017-02-12 S. Gruender

你正在使用哪个版本的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 ] 
})

来源

2017-02-12 15:40:08

感谢您的回复，但我仍然得到同样的错误。 CUSTOM_ELEMENTS_SCHEMA允许 - >名称中带有 - 的所有非角元素和 - 元素中带有 - 的 - 名称中的任何属性，这是自定义元素的常用规则（https://angular.io /docs/ts/latest/api/core/index/CUSTOM_ELEMENTS_SCHEMA-let.html）。我只使用“标题”作为选择器。令我惊讶的是，任务组件（请参阅GitHub示例）正在工作。 –

我想你是在正确的道路上。看来我正在使用旧版的Angular。有一个bugreport描述了我的问题（https://github.com/angular/angular/issues/11426）。我在哪里可以查看我的版本？我如何更新我的Angular？谢谢！！！ –

尝试将您的组件选择器更改为自定义标头，如果它适合您。检查你的package.json的角度版本。 –

Angular 2 - MEAN MongoDB NodeJS

回答

相关问题