Angular2 RC6：'<component> 不是已知元素'</component>

Question

尝试运行我的 Angular 2 RC6 应用程序时，浏览器控制台出现以下错误：

> 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 看起来像这样：

@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>标签位于 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
}

规划师.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-->

Answer 1

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

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

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}

@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}

Answer 2

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

在错误消息中您不知道且不明显的是：我将PlannerComponent作为@NgModule.declaration 导入到我的应用程序模块 (= RootModule) 中。

通过将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 {
}

谢谢你的帮助:)

Answer 3

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

<header-area></header-area>

你可能需要

<app-header-area></app-header-area>

Answer 4

我用 angular 5 为<flash-messages></flash-messages>获取了同样的问题。

您只需要在app.module.ts文件中添加以下几行

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

注意：我将这个用于消息快闪消息

Answer 5

在您的计划器组件中，您必须像这样缺少 import HeaderAreaComponent -

import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project

另外，请确保 -所有组件和管道都必须通过 NgModule 声明。

看看这是否有帮助。

Answer 6

我在Angular 7上遇到了这个问题，问题是在创建模块之后，我没有执行ng build 。 所以我表演了——

• ng build
• ng serve

它奏效了。

Answer 7

当组件在主应用程序页面中的<router-outlet>时，单元测试中出现错误。 所以应该在测试文件中定义组件，如下所示。

<app-header></app-header>
<router-outlet></router-outlet>

然后需要在spec.ts文件中添加如下。

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Answer 8

出现相同错误消息的另一个可能原因是标记名称和选择器名称不匹配。 对于这种情况：

<header-area></header-area>标签名称必须与组件声明中的'header-area'完全匹配：

@Component({
  selector: 'header-area',

Answer 9

由于某种原因，我遇到了与 angular RC.6 相同的问题，它不允许使用指令作为父组件的组件装饰器将组件传递给其他组件

但是，如果您通过 app 模块导入子组件并将其添加到声明数组中，错误就会消失。 没有太多解释为什么这是 angular rc.6 的问题

Answer 10

当我遇到这个问题时，是因为我在装饰器中使用了 'templateUrl' 而不仅仅是 'template'，因为我使用webpack并且需要在其中使用require 。 请注意装饰器名称，在我的情况下，我使用片段生成了样板代码，装饰器创建为：

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

但是对于 webpack，装饰器应该只是“模板”而不是“ templateUrl ”，如下所示：

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

改变这个解决了我的问题。

想了解更多关于这两种方法的信息吗？ 阅读这篇关于template与templateUrl

Answer 11

当我有一个文件名和类导出不匹配时，我收到了这个错误：

文件名：list.component.ts

导出的类： ListStudentsComponent

从ListStudentsComponent更改为ListComponent解决了我的问题。

Answer 12

我遇到了这个确切的问题。 失败：模板解析错误：'app-login' is not a known element... with ng test 。 我尝试了上述所有回复：没有任何效果。

NG测试解决方案：

Angular 2 Karma Test 'component-name' 不是已知元素

<= 我将违规组件的声明添加到beforEach(.. declarations[])到app.component.spec.ts 中。

示例 app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

Answer 13

我遇到了同样的问题，我通过在声明我的组件的模块 (ModuleLower) 的导出数组中添加组件 (MyComponentToUse) 来修复。 然后我在 ModuleHigher 中导入 ModuleLower，所以我现在可以在 ModuleLower 和 ModuleHigher 中重用我的组件 (MyComponentToUse)

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

Answer 14

在我的情况下，新手错误生成了相同的错误消息。

index.html 中不存在app-root标记

Answer 15

对我来说templateUrl 的路径不正确

我正在使用

购物清单-edit.component.html

而它应该是

./shopping-list-edit.component.html

愚蠢的错误，但在开始时发生。 希望能帮助遇到困难的人。

Answer 16

当我要通过声明测试组件来优化测试模块时，我在 Angular 7 中遇到了同样的问题。 刚刚添加schemas: [ CUSTOM_ELEMENTS_SCHEMA ]如下，错误已解决。

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Answer 17

对于未来的问题。 如果您认为您遵循了所有好的答案，那么问题就在那里。

尝试关闭和打开服务器。

我遇到了同样的问题，按照所有步骤操作，无法解决。 关闭，打开，它是固定的。

Answer 18

当你在一个模块中声明组件，导出它们，然后在另一个模块中使用它们时，你必须确保带有导出的模块也被导入到应用程序模块中。 :)

Answer 19

OnInit是在我的类上自动实现的，同时在 angular CLI 上使用ng new ...关键字来生成新组件。 所以在我去掉了实现，去掉了生成的空方法之后，问题就解决了。

Answer 20

好的，让我给出代码的细节，如何使用其他模块的组件。

例如，我有 M2 模块，M2 模块有 comp23 组件和 comp2 组件，现在我想在 app.module 中使用 comp23 和 comp2，方法如下：

这是 app.module.ts，请看我的评论，

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

这是 m2 模块：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

我在代码中的推荐解释了您需要在这里做什么。

现在在 app.component.html 中，你可以使用

  <app-comp23></app-comp23>

遵循 angular doc示例导入模块

Answer 21

该线程的答案较晚，但我相信有更多人可以使用从另一个角度解释的这些信息。

在 Ionic 中，自定义 Angular 组件被组织在一个名为ComponentsModule的单独模块下。 当使用ionic generate component生成第一个组件时， ionic 会与该组件一起生成ComponentsModule 。 任何后续组件都会添加到同一个模块中，这是正确的。

这是一个示例ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

要在应用程序中使用ComponentsModule ，就像任何其他 angular 模块一样，需要将ComponentsModules导入到AppModule 。 ionic generate component (v 4.12) 没有添加这一步，所以必须手动添加。

AppModule 摘录：

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Answer 22

人为错误 - 不要被错误信息误导。

我被误导的原因：我想使用的组件 (ComponentA) 已在其模块 (ModuleA) 中正确声明。 它也被正确导出到那里。 我正在使用的组件 (ComponentB) 的模块 (ModuleB) 正确指定了 ModuleA 的导入。 但是，由于错误消息< component-a-selector > is not a known element' ，我的全部重点是认为这是 ModuleA/ComponentA 的问题，因为这就是错误消息所包含的内容； 我没想过要查看我试图从中使用它的组件。 我关注了每个威胁中的每一个帖子，但最终错过了一个重要的步骤：

为我修复了什么： frot.io 的回答提示我检查我的 app.module.ts 导入列表，并且我正在使用的组件 (ComponentB) 不包括在内！