Angular2 RC6：'<component>不是已知的元素'
在浏览器控制台中，当我尝试运行我的Angular 2 RC6应用程序时，出现以下错误：
错误：模板parsing错误：“标题区域”不是已知的元素：1.如果“标题区域”是一个angular度组件，则validation它是否是该模块的一部分。 2.如果'header-area'是一个Web组件，那么在这个组件的'@ NgModule.schema'中join“CUSTOM_ELEMENTS_SCHEMA”来抑制这个消息。
<div class="page-container"> [ERROR->]<header-area></header-area> <div class="container-fluid"> “）：PlannerComponent @ 1：2
我不明白为什么没有find组件。 我的PlannerModule看起来像这样：
@NgModule({ declarations: [ PlannerComponent, HeaderAreaComponent, NavbarAreaComponent, EreignisbarAreaComponent, GraphAreaComponent, nvD3 ], imports: [ RouterModule, CommonModule, ModalModule ], bootstrap: [PlannerComponent], }) export class PlannerModule {}
就我所了解的ng2模块的概念而言，模块的各个部分都是在“声明”中声明的。 为了完整起见，这里是PlannerComponent：
@Component({ selector: 'planner', providers: [CalculationService], templateUrl: './planner.component.html', styleUrls: ['./planner.component.styl'] }) export default class PlannerComponent { }
和HeaderAreaComponent：
@Component({ selector: 'header-area', templateUrl: './header-area.component.html', styleUrls: ['./header-area.component.styl'] }) export default class HeaderAreaComponent { }
<header-area> -Tag位于planner.component.html中：
<div class="page-container"> <header-area></header-area> <div class="container-fluid"> <div class="row">...
我有什么问题吗？
更新 ：完整的代码
planner.module.ts：
import HeaderAreaComponent from '../header-area/header-area.component'; import NavbarAreaComponent from '../navbar-area/navbar-area.component'; import GraphAreaComponent from '../graph-area/graph-area.component'; import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component'; import PlannerComponent from './planner.component'; import {NgModule} from '@angular/core'; import {nvD3} from 'ng2-nvd3'; import {RouterModule} from '@angular/router'; import {CommonModule} from '@angular/common'; import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap'; @NgModule({ declarations: [ PlannerComponent, HeaderAreaComponent, NavbarAreaComponent, EreignisbarAreaComponent, GraphAreaComponent, nvD3 ], imports: [ RouterModule, CommonModule, ModalModule ], bootstrap: [PlannerComponent], }) export class PlannerModule { // TODO: get rid of the "unused class" warning }
planner.component.ts
import {Component} from '@angular/core'; import CalculationService from '../_shared/services/calculation.service/calculation.service'; import HeaderAreaComponent from '../header-area/header-area.component'; @Component({ selector: 'planner', providers: [CalculationService], templateUrl: './planner.component.html', styleUrls: ['./planner.component.styl'] }) export default class PlannerComponent { }
planner.component.html
<div class="page-container"> <header-area></header-area> <div class="container-fluid"> <div class="row"> <div class="col-xs-2 col-sm-1 sidebar"> <navbar-area></navbar-area> </div> <div class="col-xs-10 col-sm-11"> <graph-area></graph-area> </div> </div><!--/.row--> <div class="row"> <div class="col-xs-10 col-sm-11 offset-sm-1"> <ereignisbar-area></ereignisbar-area> </div> </div><!--/.row--> </div><!--/.container--> </div><!--/.page-container-->
当我将模块A导入到模块B中，然后尝试使用模块B中的模块A中的一个组件时，出现此错误。
这只是在我的exports数组中声明该组件的问题。
@NgModule({ declarations: [ MyComponent ], exports: [ MyComponent ] }) export class ModuleA {}
@NgModule({ imports: [ ModuleA ] }) export class ModuleB {}
我在Sanket的回答和评论的帮助下解决了这个问题。
你不知道的，在错误信息中不明显的是：我在我的应用程序模块（= RootModule）中将PlannerComponent作为@NgModule.declaration导入。
通过导入PlannerModule为@ NgModule.imports来修复错误。
之前：
@NgModule({ declarations: [ AppComponent, PlannerComponent, ProfilAreaComponent, HeaderAreaComponent, NavbarAreaComponent, GraphAreaComponent, EreignisbarAreaComponent ], imports: [ BrowserModule, RouterModule.forRoot(routeConfig), PlannerModule ], bootstrap: [AppComponent] }) export class AppModule {
后：
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, RouterModule.forRoot(routeConfig), PlannerModule ], bootstrap: [AppComponent] }) export class AppModule { }
谢谢你的帮助 ：）
在您的计划组件中，您必须像这样缺less导入HeaderAreaComponent –
import { HeaderAreaComponent } from '../header-area.component'; //change path according your project
另外，请确保 – 所有组件和pipe道必须通过NgModule进行声明 。
看看这是否有帮助。
如果您已经使用了Webclipse自动生成的组件定义，则可能会发现select器名称前面带有“app-”。 显然这是一个新的约定时声明主要应用程序组件的子组件。 检查你的select器是如何在你的组件中定义的，如果你已经使用'new' – 'component'在Angular IDE中创build它。 所以，而不是放
<header-area></header-area>
你可能需要
<app-header-area></app-header-area>
我有同样的问题与angularRC.6由于某些原因，它不允许传递组件到其他组件使用指令作为组件装饰到父组件
但是，如果您通过应用程序模块导入子组件并将其添加到声明数组中，错误就会消失。 没有太多的解释，为什么这是一个问题与angularrc.6
具有相同错误信息的另一个可能原因是标签名称和select器名称不匹配。 对于这种情况：
<header-area></header-area>标签名称必须与组件声明中的'header-area'完全匹配：
@Component({ selector: 'header-area',
一个新手的错误是在我的情况下产生相同的错误信息。
index.html中没有app-root标签
在angular度CLI上使用ng new ...关键字生成新组件时， OnInit自动实现在我的类上。 所以在我删除了实现并删除了生成的空方法后，问题就解决了。
