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

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

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

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

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

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

我在Sanket的答案和评论的帮助下进行了修复。

您不知道并且在错误消息中不明显的是：我在我的应用模块（= RootModule）中将PlannerComponent作为@ NgModule.declaration导入了。

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

谢谢你的帮助 ：）

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

<header-area></header-area>

你可能需要

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

我对<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 ]
  ------------
})

NB：我正在使用此消息发送Flash消息

在你的规划师组成部分，你必须失去进口HeaderAreaComponent喜欢这个-

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

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

看看是否有帮助。

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

• ng build
• ng serve

而且有效。

当<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();
  }));
});

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

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

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

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

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

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

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

但是对于webpack，装饰器应该只是' template ' 不是 ' templateUrl '，如下所示：

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

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

想更多地了解这两种方法？阅读有关templatevs的这篇中等帖子templateUrl

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

文件名：list.component.ts

导出的类：ListStudentsComponent

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

我遇到了这个确切的问题。失败：模板解析错误：“应用程序登录”不是一个已知的元素......用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();
  ...

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

            @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 ]
});

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

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

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

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

该 app-root标签在index.html中不存在

OnInit是在我的班上自动实现的，同时ng new ...在angular CLI上使用关键字来生成新组件。因此，在删除实现并删除了生成的空方法之后，问题得以解决。

对我来说，templateUrl的路径不正确

我在用

shopping-list-edit.component.html

鉴于应该

./shopping-list-edit.component.html

愚蠢的错误，但刚开始时会发生。希望可以帮助遇难的人。

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

在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。离子生成组件（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 {}

好的，让我详细介绍代码，如何使用其他模块的组件。

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

遵循角度文档样本导入模块