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

I am getting the following error in the browser console when trying to run my Angular 2 RC6 app:

> 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 don't get why the component isn't 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 far as I understood the concept of Modules in ng2, the parts of the 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 the HeaderAreaComponent:

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

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

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

    <div class="row">...

Did I get something wrong?

Update: Complete 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-->

I received this error when I imported Module A into Module B, and then tried to use a component from Module A in Module B.

The solution is to declare that component in the exports array.

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

Angular2 RC6 with angular-cli / How to upgrade angular2 version in , UPDATE: A guide to Upgrading from angular-cli@1.0.0-beta.10 to the angular-cli​@webpack on Angular-Cli repo @ GitHub. Change package.json  In RC6, we’ve changed the output structure of our NPM packages to better enable tools like Rollup and Webpack2 to optimize your applications during bundling. Each @angular/* package now contains: “ESM” code - this is ES5 code with ES2015 style import/exports. This works great with Rollup and Webpack2 and allows more efficient tree shaking.

I fixed it with help of Sanket's answer and the comments.

What you couldn't know and was not apparent in the Error Message is: I imported the PlannerComponent as a @NgModule.declaration in my App Module (= RootModule).

The error was fixed by importing the 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 :)

Crash in Angular2 RC6 · Issue #143 · auth0/angular2-jwt · GitHub, Angular2 RC6 removes a lot of deprecated API. Angular2-JWT uses the provide() method from @angular/core which has been removed. r/Angular2: Angular is Google's open source framework for crafting high-quality front-end web applications. r/Angular2 exists to help spread news … Press J to jump to the feed. Press question mark to learn the rest of the keyboard shortcuts

If you have used the Webclipse automatically generated component definition you may find that the selector name has 'app-' prepended to it. Apparently this is a new convention when declaring sub-components of a main app component. Check how your selector has been defined in your component if you have used 'new' - 'component' to create it in Angular IDE. So instead of putting

<header-area></header-area>

you may need

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

Upgrad to Angular2-RC6 support · Issue #28 · start-angular/SB , Recently Angular2 team released Angular2-RC6. So is there any plan to give support for RC6 ? What's new in RC6 ? I started a project with rc1 , I have to make changes for RC5, and now some things are broken again with RC6. I m seriously wondering to move to aurelia.io for my next project. Angular2 seems an over-engineered project with too much complexity for nothing. Maybe I will change my mind, but the first week with angular2 does not convinced me 😉

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

You just need add below lines in 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 am using this one for message flash-messages

Angular2 RC6 migration guide? : Angular2, So RC6 deprecated directives and pipes in components. So how can we use the new ngModule decorator for migrating out app. I have some shared directives  Angular2 RC6 upgrade. Ask Question Asked 3 years, 6 months ago. Active 3 years, 5 months ago. Viewed 9k times 7. 1. after updating my project to RC6 following

In your planner component, you must be missing import HeaderAreaComponent like this-

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

Also, make sure - All the components and pipes must be declared via an NgModule.

See if this helps.

Angular 2 RC6 : Angular2, I've just managed to update my project and get ng2-bootstrap working on RC5 today. Just as I wanted to continue with normal developing I see RC6 is out. Previously in my Angular2 RC5 app I had an input element like the following: <input type="text" formControlName="blah" disabled/> The intent was to make this field non-editable by the user when in edit mode; hence the disabled attribute. After upgrading to Angular2 RC6 I'm getting the following message in the console:

Is there a way to get the current URL or path from within a Angular2 , I'm currently using Angular2 rc6. - Quora. Quora. Open In AppSign In. We would like to show you a description here but the site won’t allow us.

Observables for Angular2 RC6, Angular 2 is now in release candidate stage (RC6). Reactive Programming techniques are Duration: 48:32 Posted: Oct 16, 2016 angular2-seed. A simple starter project demonstrating the basic concepts of Angular 2. Usage. Clone or fork this repository; Make sure you have node.js installed version 5+ Make sure you have NPM installed version 3+ WINDOWS ONLY run npm install -g webpack webpack-dev-server typescript to install global dependencies; run npm install to install

Myleadcrm, Angular2 RC6 is out now! #ng2 #angular #angular2 #frontend #frameworks #​typescript. In this video we will build a Github profile search application with Angular 2 RC6. This is an updated version of angular2 in 15min - Duration: 18:22. Duncan Hunter 141,264 views.

Comments
  • Why do you import HeaderAreaComponent without {} and the others with {}. Can you try to import them the same way? (perhaps removing the default?)
  • I removed the default and imported it without {}, but I get the same result.
  • And naturally, Angular's documentation on components doesn't even mention this.
  • I'd been scratching my head over this one for a day! Thankyou so much!
  • I edited your answer to change the formatting to make the difference clearer. Now that I've done this, I see that it seems that the difference is that you simply removed a number of items from declarations. Could this be right?
  • Jepp, that's right. AppModule and PlannerModule are two seperate things, and I declared some components in both. It works by declaring a component in only one module and importing this module within the other.
  • thanks for posting your solution, but in the "before" section you also show as imported the PlannerModule
  • Same is true with components generated by ng cli too.
  • If I generate a component with --selector option, then I do not need to prefix app- with the component tag. Ex: ng generate component menu-list --selector 'menu-list'
  • Cannot believe this was my issue.. :/ Thank you! Upvoted!!
  • Only solution for my problem I was facing since 2 hours
  • Unfortunately not - the error stays the same and the import is marked as unused by lint.
  • can you please post complete code of your NgModule and planner component?
  • In addition to Gunter suggestion above, also try to import BrowserModule in your planner componet like this- import { BrowserModule } from '@angular/platform-browser';