Angular2 RC6: '<component> is not a known element'

Question

I get the following error in the browser console when trying to start an Angular 2 RC6 application:

> 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 

I do not understand why the component was not found. My PlannerModule looks like this:

 @NgModule({ declarations: [ PlannerComponent, HeaderAreaComponent, NavbarAreaComponent, EreignisbarAreaComponent, GraphAreaComponent, nvD3 ], imports: [ RouterModule, CommonModule, ModalModule ], bootstrap: [PlannerComponent], }) export class PlannerModule {} 

and as I understand the concept of modules in ng2, parts of modules are declared in "declarations". For completeness, here is the PlannerComponent:

 @Component({ selector: 'planner', providers: [CalculationService], templateUrl: './planner.component.html', styleUrls: ['./planner.component.styl'] }) export default class PlannerComponent { } 

and HeaderAreaComponent:

 @Component({ selector: 'header-area', templateUrl: './header-area.component.html', styleUrls: ['./header-area.component.styl'] }) export default class HeaderAreaComponent { } 

<header-area> -Tag is located in planner.component.html:

 <div class="page-container"> <header-area></header-area> <div class="container-fluid"> <div class="row">... 

Am I misunderstood something?

Update : full code

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

I fixed it with a response to Sanket and comments.

What you could not know and was not obvious in the error message: I imported PlannerComponent as @ NgModule.declaration in my application module (= RootModule).

The bug was fixed by importing PlannerModule as @ NgModule.imports.

Before:

 @NgModule({ declarations: [ AppComponent, PlannerComponent, ProfilAreaComponent, HeaderAreaComponent, NavbarAreaComponent, GraphAreaComponent, EreignisbarAreaComponent ], imports: [ BrowserModule, RouterModule.forRoot(routeConfig), PlannerModule ], bootstrap: [AppComponent] }) export class AppModule { 

After:

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, RouterModule.forRoot(routeConfig), PlannerModule ], bootstrap: [AppComponent] }) export class AppModule { } 

Thanks for your help:)

Answer 2

I got this error when I imported module A into module B, and then tried to use the component from module A in module B.

It was a matter of declaring this component in my exports array.

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

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

Answer 3

If you used the definition of automatically generated Webclipse automatically, you may find that “app-” is added to the selector name. Apparently, this is a new agreement when declaring subcomponents of the main application component. Check how your selector was defined in your component if you used the "new" - "component" to create it in the Angular IDE. Therefore, instead of posting

 <header-area></header-area> 

you may need

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

Answer 4

You should not have a HeaderAreaComponent import in your scheduler component, for example this-

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

Also make sure all components and channels must be declared through NgModule .

See if that helps.

Answer 5

I get the same problem for <flash-messages></flash-messages> with angular 5.

You just need to add the lines below in the app.module.ts file

 import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FlashMessageModule } from "angular-flash-message"; @NgModule({ --------------- imports: [ FlashMessageModule, ------------------ ], ----------------- schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ------------ }) 

NB: I use this for flash message messages

Answer 6

I ran into this problem on Angular 7, and the problem was that after creating the module I did not run ng build . So I did -

• ng build
• ng serve

and it worked.

Answer 7

A unit test error occurs when a component is located outside the <router-outlet> on the application’s main page. therefore, you should define the component in the test file as shown below.

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

and then you need to add spec.ts to the file as shown below.

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

Answer 8

I had the same problem with angular RC.6 for some reason, it does not allow passing a component to another component using directives as a component decorator to the parent component

But if you import the child component through the application module and add it to the declaration array, the error will disappear. There is no explanation why this is a problem with angular rc.6

Answer 9

Another possible reason for having the same error message is a mismatch between the tag name and the selector name. Ad hoc:

<header-area></header-area> the tag name must exactly match the 'header-area' from the component declaration:

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

Answer 10

When I had this problem, it was because I used the templateUrl template instead of the "template" in the decorator, since I use webpack and you need to use require. Just be careful with the name of the decorator, in my case I generated the template code using the fragment, the decorator was created as:

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

but for webpack, the decorator should just be a "template" NOT 'templateUrl', for example:

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

by changing this, I solved the problem.

Want to learn more about the two methods? read this middle post about template vs templateUrl

Answer 11

I got this error when I had a mismatch between the exported file name and class:

file name: list.component.ts

exported class: ListStudentsComponent

Switching from ListStudentsComponent to ListComponent fixed my problem.

Answer 12

I ran into this exact problem. Failed: Template parsing errors: 'app-login' is not a known element ... with ng test . I tried all of the above answers: nothing worked.

NG TEST SOLUTION:

Angular 2 Karma Test 'component-name' not known as element

<= I have added declarations for disruptive components to beforEach(.. declarations[]) in app.component.spec.ts.

EXAMPLE app.component.spec.ts

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

Answer 13

I had the same problem and fixed it by adding the component (MyComponentToUse) to the export array in the module where my component (ModuleLower) was declared. Then I import ModuleLower into ModuleHigher, so now I can reuse my component (MyComponentToUse) in ModuleLower and ModuleHigher.

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

Answer 14

I had the same problem with Angular 7 when I was going to refine the test module by declaring the test component. Just added schemas: [ CUSTOM_ELEMENTS_SCHEMA ] as follows and the error was fixed.

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

Answer 15

In my case, the newbie error generated the same error message.

The app-root tag was missing in index.html

Answer 16

OnInit was automatically implemented in my class when using the ng new ... keyword phrase in the angular CLI to create a new component. Therefore, after I removed the implementation and deleted the empty method that was generated, the problem was resolved.

Answer 17

For me, the path for templateUrl was not correct

I used

shopping list-edit.component.html

Then how it was supposed to be

./shopping-list-edit.component.html

Stupid mistake, but it happens at startup. Hope this helps someone in trouble.

Answer 18

Late answer for the topic, but I'm sure there are more people who can use this information explained in a different light.

In Ionic, custom corner components are organized into a separate ComponentsModule . When the first component is generated using the ionic generate component , along with the component, the ionic generates the ComponentsModule . Any subsequent components are added to the same module, and rightly so.

Here is a sample 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 {} 

To use ComponentsModule in an application, like any other corner modules, ComponentsModules must be imported into the AppModule . The ion generation component (v 4.12) does not add this step, so you must add it manually.

Excerpt from 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 19

For future problems. If you think you have followed all the good answers, there is a problem.

Try turning the server off and on again.

I had the same problem, performed all the steps, could not solve it. Turn it off and it has been fixed.

Answer 20

Ok, let me give you some code details on how to use another module component.

For example, I have M2 module, M2 module has comp23 component and comp2 component, now I want to use comp23 and comp2 in app.module, here's how:

this is app.module.ts, see my comment,

  // import this module ALL component, but not other module 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 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 { } 

This is a m2 module:

  import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; // must import this module 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 child component. declarations: [Comp2Component, Comp23Component], // for other module to use these component, must exports exports: [Comp2Component, Comp23Component] }) export class M2Module { } 

My comments in the code explain what you need to do here.

Now in app.component.html you can use

  <app-comp23></app-comp23> 

follow the corner module import sample document