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中的模块概念，模块的各个部分在声明中声明了＆＃39;。为了完整起见，这里是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
}

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-->

Answer 1

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

这是在我的exports数组中声明该组件的问题。

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

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

Answer 2

我在Sanket's answer和评论的帮助下修复了它。

您在“错误消息”中无法了解并且不明显的是：我在我的应用模块中将 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自动生成的组件定义，您可能会发现选择器名称有＆＃39; app - ＆＃39;先于它。显然，这是一个新的约定，用于声明主应用程序组件的子组件。如果您使用过＆＃39; new＆＃39;，请检查您的选择器在您的组件中的定义方式 - ＆＃39;组件＆＃39;在Angular IDE中创建它。所以不要放

<header-area></header-area>

您可能需要

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

Answer 4

在 planner 组件中，您必须缺少像这样的导入 HeaderAreaComponent -

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

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

看看这是否有帮助。

Answer 5

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

ng build
ng serve

它奏效了。

Answer 6

我使用角度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 ]
  ------------
})

NB：我正在使用此邮件flash-messages

Answer 7

当我的文件名和类导出不匹配时出现此错误：

filename：list.component.ts

导出的类： ListStudentsComponent

从 ListStudentsComponent 更改为 ListComponent 修复了我的问题。

Answer 8

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

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

Answer 9

我遇到了这个确切的问题。失败：模板解析错误： “ {app1登录”不是public int countYZ(String str) { if(str == null) return 0; return (int)Arrays.stream(str.toLowerCase().split("[^a-z]")) .filter(e -> e.endsWith("y") || e.endsWith("z")) .count(); }的已知元素... 。我尝试了以上所有答复：无效。

NG测试解决方案：

Angular 2 Karma Test 'component-name' is not a known element

<=我将有问题的组件的声明添加到了{em> app.component.spec.ts 的ng test中。

示例app.component.spec.ts

beforEach(.. declarations[])

Answer 10

当我遇到这个问题时，那是因为我使用了＆＃39; templateUrl＆＃39;而不只是＆＃39;模板＆＃39;在装饰器中，因为我使用 webpack 并且需要在其中使用 require 。请小心装饰器名称，在我的情况下，我使用片段生成样板代码，装饰器创建为：

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

但是对于webpack，装饰者应该只是＆＃39; 模板＆＃39; 不＆＃39; templateUrl ＆＃39;，如下所示：

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

改变这一点解决了我的问题。

想了解更多有关这两种方法的信息吗？阅读this medium post about template vs templateUrl

Answer 11

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

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

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

Answer 12

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

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

Answer 13

我遇到了同样的问题，并通过在声明了我的组件（ModuleLower）的模块的exports数组中添加了组件（MyComponentToUse）来解决。然后，我在ModuleHigher中导入ModuleLower，以便现在可以在ModuleLower和ModuleHigher中重用我的组件（MyComponentToUse）

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


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

Answer 14

当主应用页面中的组件超出<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 15

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

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

为我解决了什么问题： frot.io's answer 提示我检查我的 app.module.ts 导入列表，我正在使用的组件 (ComponentB) 未包含在内！

Answer 16

对我来说 templateUrl 的路径不正确

我正在使用

shopping-list-edit.component.html

应该是

./ shopping-list-edit.component.html

严重错误，但刚开始时会发生。希望能帮助遇难的人。

Answer 17

该线程的最新答案，但我敢肯定还有更多的人可以使用此信息，从另一个角度解释。

在Ionic中，自定义角度分量在称为fieldsets的单独模块下组织。当使用ComponentsModule生成第一成分时，离子会生成ionic generate component。正确地将所有后续组件添加到同一模块中。

这是一个示例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导入到ComponentsModules中。离子生成组件（v 4.12）不会添加此步骤，因此必须手动添加。

AppModule的摘录：

AppModule

Answer 18

OnInit在我的班级上自动实现，同时在角度CLI上使用ng new ...关键短语生成新组件。因此，在删除实现并删除生成的空方法后，问题就解决了。

Answer 19

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

尝试关闭然后再打开服务器。

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

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>

按照角度文档sample import modul

Angular2 RC6：＆＃39; <component>不是已知元素＆＃39;

20 个答案: