文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Angular2 RC6：“<component>不是一个已知的元素”

问Angular2 RC6：“<component>不是一个已知的元素”
EN

Stack Overflow用户
提问于 2016-09-05 15:29:18
回答 22查看 213.9K关注 0票数 148

当我试图运行我的Range2 RC6应用程序时，浏览器控制台中出现了以下错误：

代码语言：javascript
复制
> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

我不明白为什么组件找不到。我的PlannerModule看起来是这样的：

代码语言：javascript
复制
@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

就我所理解的ng2中模块的概念而言，模块的各个部分都是在“声明”中声明的。为了完整起见，下面是PlannerComponent：

代码语言：javascript
复制
@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

HeaderAreaComponent：

代码语言：javascript
复制
@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

<header-area>-Tag位于planner.component.html：

代码语言：javascript
复制
<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

我出什么问题了吗？

更新：完整代码

planner.module.ts：

代码语言：javascript
复制
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

代码语言：javascript
复制
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

代码语言：javascript
复制
<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-->
angular
EN

回答 22

Stack Overflow用户

回答已采纳

发布于 2016-09-05 17:36:46

我在桑基特的回答和评论的帮助下修复了它。

在错误消息中，您不知道也不清楚的是:我将PlannerComponent作为@NgModule.declaration导入到应用程序模块(= RootModule)中。

通过将PlannerModule导入为@NgModule.imports修复了错误。

在此之前：

代码语言：javascript
复制
@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

之后：

代码语言：javascript
复制
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

(谢谢你的帮助:)

票数 43
EN

Stack Overflow用户

发布于 2016-10-26 05:02:16

当我将模块A导入模块B，然后尝试使用模块B中的模块A组件时，我收到了此错误。

解决方案是在exports数组中声明该组件。

代码语言：javascript
复制
@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}
代码语言：javascript
复制
@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}
票数 278
EN

Stack Overflow用户

发布于 2017-07-04 09:52:27

如果您使用了自动生成的组件定义，您可能会发现选择器的名称中有“app-”。显然，在声明主应用程序组件的子组件时，这是一个新的约定。检查您的选择器是如何在您的组件中定义的，如果您使用了“new”-“component”在角IDE中创建它。所以不要把

代码语言：javascript
复制
<header-area></header-area>

你可能需要

代码语言：javascript
复制
<app-header-area></app-header-area>
票数 24
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39333739

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档