Angular2 RC6：'<component> 不是已知元素'
Posted
技术标签:
【中文标题】Angular2 RC6：\'<component> 不是已知元素\'【英文标题】：Angular2 RC6: '<component> is not a known element'Angular2 RC6：'<component> 不是已知元素' 【发布时间】：2017-01-13 00:14:37 【问题描述】：尝试运行我的 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>-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-->
【问题讨论】：
为什么你导入HeaderAreaComponent 没有default？）
我删除了默认值并在没有我在将模块 A 导入模块 B 时收到此错误，然后尝试在模块 B 中使用模块 A 中的组件。
解决方案是在exports 数组中声明该组件。
@NgModule(
declarations: [
MyComponent
],
exports: [
MyComponent
]
)
export class ModuleA
@NgModule(
imports: [
ModuleA
]
)
export class ModuleB
【讨论】：
当然，Angular 的组件文档甚至都没有提到这一点。 我已经为这个挠头一天了！非常感谢！【参考方案2】：我在 Sanket's answer 和 cmets 的帮助下修复了它。
您不知道并且在错误消息中不明显的是：我将 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
感谢您的帮助:)
【讨论】：
我编辑了您的答案以更改格式以使差异更清晰。现在我已经这样做了，我发现不同之处在于您只是从declarations 中删除了一些项目。这可能是对的吗？
杰普，没错。 AppModule 和 PlannerModule 是两个独立的东西，我在两者中声明了一些组件。它通过在一个模块中声明一个组件并在另一个模块中导入该模块来工作。
感谢您发布您的解决方案，但在“之前”部分中，您还显示为导入的 PlannerModule【参考方案3】：
如果您使用过 Webclipse 自动生成的组件定义，您可能会发现选择器名称前附加了“app-”。显然，这是在声明主应用程序组件的子组件时的新约定。如果您使用 'new' - 'component' 在 Angular IDE 中创建选择器，请检查您的选择器是如何在组件中定义的。所以不要放
<header-area></header-area>
你可能需要
<app-header-area></app-header-area>
【讨论】：
ng cli 生成的组件也是如此。
如果我生成一个带有--selector 选项的组件，那么我不需要在app- 前面加上组件标签。例如：ng generate component menu-list --selector 'menu-list'
不敢相信这是我的问题.. :/ 谢谢！点赞！！【参考方案4】：
我为 <flash-messages></flash-messages> 获取了同样的问题，角度为 5。
您只需在 app.module.ts 文件中添加以下行
import ---, CUSTOM_ELEMENTS_SCHEMA from '@angular/core';
import FlashMessageModule from "angular-flash-message";
@NgModule(
---------------
imports: [
FlashMessageModule,
------------------
],
-----------------
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
------------
)
注意：我正在使用这个消息flash-messages
【讨论】：
自 2 小时以来我遇到的问题的唯一解决方案【参考方案5】：在您的 planner 组件中，您必须像这样缺少 import HeaderAreaComponent -
import HeaderAreaComponent from '../header-area.component';
//change path according your project
另外，请确保 - 所有组件和管道都必须通过 NgModule 声明。
看看这是否有帮助。
【讨论】：
很遗憾没有 - 错误保持不变，导入被 lint 标记为未使用。 能否请您发布您的 NgModule 和规划器组件的完整代码？ 除了上面的 Gunter 建议外，还可以尝试像这样在您的规划器组件中导入 BrowserModule-import BrowserModule from '@angular/platform-browser';
我在规划器组件和模块中将其导入并声明为导入 - 仍然没有成功。
现在尝试像这样在 NgModule 的提供者中添加 CalculationService-providers: [CalculationService],【参考方案6】：
我在 Angular 7 上遇到了这个问题，问题是在创建模块后，我没有执行 ng build。所以我表演了-
ng build
ng serve
它成功了。
【讨论】：
再次运行 ng serve 为我做了这件事，虽然很蹩脚【参考方案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();
));
);
【讨论】：
【参考方案8】：出现相同错误消息的另一个可能原因是标签名称和选择器名称不匹配。对于这种情况：
<header-area></header-area> 标签名称必须与组件声明中的'header-area' 完全匹配：
@Component(
selector: 'header-area',
【讨论】：
【参考方案9】：我遇到了同样的问题，我通过在声明我的组件的模块 (ModuleLower) 的导出数组中添加组件 (MyComponentToUse) 来解决此问题。 然后我在 ModuleHigher 中导入 ModuleLower，所以我现在可以在 ModuleLower 和 ModuleHigher 中重用我的组件（MyComponentToUse）
@NgModule(
declarations: [
MyComponentToUse
],
exports: [
MyComponentToUse
]
)
export class ModuleLower
@NgModule(
imports: [
ModuleLower
]
)
export class ModuleHigher
【讨论】：
没错，只需要导出组件。 你救了我。非常感谢！【参考方案10】：由于某种原因，我在 Angular RC.6 上遇到了同样的问题，它不允许使用指令作为父组件的组件装饰器将组件传递给其他组件
但是如果您通过 app 模块导入子组件并将其添加到声明数组中，错误就会消失。没有太多解释为什么这是 angular rc.6 的问题
【讨论】：
【参考方案11】：当我遇到这个问题时，是因为我在装饰器中使用了'templateUrl'而不是'template'，因为我使用webpack并且需要使用require在里面。请注意装饰器名称，在我的例子中，我使用 sn-p 生成了样板代码，装饰器被创建为：
@Component(
selector: '',
templateUrl: 'PATH_TO_TEMPLATE'
)
但对于 webpack，装饰器应该只是 'template' NOT 'templateUrl'，如下所示：
@Component(
selector: '',
template: require('PATH_TO_TEMPLATE')
)
改变这个解决了我的问题。
想了解更多关于这两种方法的信息吗？阅读this medium post about template vs templateUrl
【讨论】：
【参考方案12】：当我导出的文件名和类不匹配时出现此错误：
文件名：list.component.ts
类导出：ListStudentsComponent
从 ListStudentsComponent 更改为 ListComponent 解决了我的问题。
【讨论】：
【参考方案13】：我遇到了这个确切的问题。 失败：模板解析错误：
'app-login' 不是已知元素... 与 ng test。我尝试了上述所有回复：没有任何效果。
NG 测试解决方案：
Angular 2 Karma Test 'component-name' is not a known element
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();
...
【讨论】：
【参考方案14】：在我的案例中，一个新手错误生成了相同的错误消息。
app-root 标签不在 index.html 中
【讨论】：
【参考方案15】：templateUrl 的路径不正确
我正在使用
shopping-list-edit.component.html
应该是这样的
./shopping-list-edit.component.html
愚蠢的错误，但在开始时发生。希望能帮助有困难的人。
【讨论】：
【参考方案16】：当我打算通过声明测试组件来优化测试模块时，我遇到了与 Angular 7 相同的问题。刚刚添加schemas: [ CUSTOM_ELEMENTS_SCHEMA ]如下，错误已解决。
TestBed.configureTestingModule(
imports: [ReactiveFormsModule, FormsModule],
declarations: [AddNewRestaurantComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
);
【讨论】：
【参考方案17】：对于未来的问题。 如果您认为您遵循了所有好的答案，但问题就在那里。
尝试关闭再打开服务器。
我遇到了同样的问题，按照所有步骤，无法解决。关闭，打开，它是固定的。
【讨论】：
首先我以为我只需要重启npm start（在水下ng serve）。这有时有助于解决问题。现在我不得不完全重新启动 Visual Studio Code。【参考方案18】：
OnInit 是在我的课堂上自动实现的，同时使用 angular CLI 上的 ng new ... 关键字生成新组件。所以在我去掉了实现，去掉了生成的空方法之后，问题就解决了。
【讨论】：
【参考方案19】：好的，我来详细介绍一下代码，如何使用其他模块的组件。
例如我有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
【讨论】：
【参考方案20】：该线程的答案较晚，但我相信有更多的人可以使用从另一个角度解释的此信息。
在 Ionic 中，自定义角度组件被组织在一个名为 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。 ionic generate 组件（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
【讨论】：
【参考方案21】：人为错误 - 不要被错误消息误导。
为什么我被误导了：我想使用的组件 (ComponentA) 在它的模块 (ModuleA) 中被正确声明。它也被正确地导出到那里。我正在使用的组件 (ComponentB) 的模块 (ModuleB) 正确指定了 ModuleA 的导入。 但是，由于错误消息是
为我解决了什么问题： frot.io's answer 提示我检查我的 app.module.ts 导入列表，我正在使用的组件 (ComponentB) 不包括在内！
【讨论】：
是的，只是掉进了那个陷阱。谢谢。以上是关于Angular2 RC6：'<component> 不是已知元素'的主要内容，如果未能解决你的问题，请参考以下文章