Angular2 RC6: “ < 元素 > 不是已知元素”

当我尝试运行 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

我不明白为什么没有找到这个组件，我的 Planner 模块看起来是这样的:

@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 {
}

组件:

@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-->
213982 次浏览
小开

在您的 计划者组件中，您必须像这样丢失导入 HeaderArea 组件-

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

还有，确保 所有组件和管道都必须通过 NgModule 声明。

看看有没有用。

小开
最佳答案

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

在错误消息中您不知道也不明显的是: 我在 App Module (= RootModule)中将 PlannerComponent作为 @ NgModule. 声明导入。

通过将 PlannerModule导入为 @ NgModule. import，错误得到了修复。

以前:

@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 {
}

谢谢你的帮助:)

小开

角 RC.6也有同样的问题，由于某些原因，它不允许将组件作为组件修饰符传递给其他组件，而是将指令作为组件修饰符传递给父组件

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

小开

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

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

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

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

具有相同错误消息的另一个可能原因是标记名称和选择器名称不匹配。在这种情况下:

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

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

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

<header-area></header-area>

你可能需要

<app-header-area></app-header-area>
小开

在我的案例中，一个新手错误正在生成相同的错误消息。

Index.html 中没有 app-root标记

小开

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

小开

当我遇到这个问题时，是因为我在装饰器中使用了‘ templateUrl’而不仅仅是‘ template’，因为我使用的是 网络包并且需要在其中使用 要求。在我的例子中，我使用一个代码片段生成了样板代码，但是注意修饰符的名称，修饰符被创建为:

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

但是对于 webpack，装饰应该是“ 模板”没有“ TemplateUrl”，像这样:

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

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

想知道更多关于这两种方法的信息吗? 请阅读 这篇关于 ABC0和 templateUrl的中期文章

小开

对于角度为5的 <flash-messages></flash-messages>，我得到了相同的问题。

您只需要在 应用程序模块文件中添加以下行

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




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

注意: 我正在使用这个消息 < a href = “ https://www.npmjs.com/package/angle-flash-message”rel = “ noReferrer”> flash-message

小开

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

例如，我有 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>

跟随角度文件 样品进口模块样品进口模块

小开

我得到这个错误时，我有一个文件名和类导出不匹配:

文件名: list.Component. ts

导出类: ListStudentsComponent

从 ListStudentsComponent改为 ListComponent 列表组件解决了我的问题。

小开

对于我的路径为 TemplateUrl是不正确的

我在吸毒

采购-列表-编辑. 组件.html

本来应该是的

./shop-list-edit. Component. html

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

小开

这个帖子回答得很晚，但是我相信还有更多的人可以用另一种角度来解释这个信息。

在爱奥尼亚，定制的角度分量是组织在一个单独的模块称为 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导入到 AppModule。离子生成组件(v 4.12)没有添加这个步骤，因此必须手动添加。

应用程式单元节录:

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

我碰到了这个问题。 < em > 失败: 模板解析错误: “ app-login”不是一个已知元素... ... 使用 ng test时，我尝试了以上所有的回复: 都没有用

吴测试解决方案:

角2卡玛测试组件-名称 & # 39; 不是一个已知的元素

< = 我在 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();
...
小开

我在 角度7上面临这个问题，问题是在创建模块之后，我没有执行 ng build。所以我表演了

  • ng build
  • ng serve

成功了。

小开

我也有同样的问题，通过在声明组件的模块(ModuleLower)中的导出数组中添加组件(MyComponent entToUse) ，我解决了这个问题。 然后在 ModuleHigher 中导入 ModuleLower，这样我就可以在 ModuleLower 和 ModuleHigher 中重用我的组件(MyComponent entToUse)

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




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

当我要通过声明测试组件来改进测试模块时，Angular 7也有同样的问题。按照以下步骤添加 schemas: [ CUSTOM_ELEMENTS_SCHEMA ]，解决了错误。

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

单元测试中出现的错误，当组件在主应用程序页面中超出 <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();
}));
});
小开

以备不时之需。 如果你认为你遵循了所有的正确答案，那么问题就在这里。

尝试关闭和打开服务器。

我也遇到了同样的问题，按照所有的步骤，但是解决不了。关掉，打开，然后就修好了。

小开

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

我被误导的原因: 我想要使用的组件(Component A)在它的模块(ModuleA)中正确地声明了。它也被正确地出口到了那里。我正在使用的组件(Component B)的模块(ModuleB)已经正确地指定了 ModuleA 的导入。< strong > 但是，由于错误消息是 < Component-a-selector > 不是一个已知元素’ ，我的全部注意力都集中在认为这是 ModuleA/Component 的一个问题，因为错误消息中包含了这个问题; 我没有想到要查看我试图使用它的组件。我关注了每一个威胁的每一个帖子，但最终错过了一个关键步骤:

是什么改变了我: Frot.io 的回答 提示我检查我的 app.module.ts 导入列表，并且我正在工作的组件(Component B)不包括在内！

小开

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


提交答案