Angular2 RC6 component is not a known element

Question

I am getting the following error in the browser console when trying to run my Angular 2 RC6 app    gt  Error  Template parse errors   header-area  is not a known element   gt  1  If  header-area  is an Angular component  then verify that it is part of this module   gt  2  If  header-area  is a Web Component then add  CUSTOM ELEMENTS SCHEMA  to the   NgModule schema  of this component  gt  to suppress this message          lt div class  page-container  gt           ERROR- gt   lt header-area gt  lt  header-area gt           lt div class  container-fluid  gt    gt      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  lt header-area gt -Tag is located in planner component html    lt div class  page-container  gt     lt header-area gt  lt  header-area gt     lt div class  container-fluid  gt        lt div class  row  gt       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   lt div class  page-container  gt     lt header-area gt  lt  header-area gt     lt div class  container-fluid  gt        lt div class  row  gt         lt div class  col-xs-2 col-sm-1 sidebar  gt           lt navbar-area gt  lt  navbar-area gt         lt  div gt         lt div class  col-xs-10 col-sm-11  gt           lt graph-area gt  lt  graph-area gt         lt  div gt       lt  div gt  lt  --  row-- gt        lt div class  row  gt         lt div class  col-xs-10 col-sm-11 offset-sm-1  gt           lt ereignisbar-area gt  lt  ereignisbar-area gt         lt  div gt       lt  div gt  lt  --  row-- gt      lt  div gt  lt  --  container-- gt   lt  div gt  lt  --  page-container-- gt

User · Answer

Another possible cause of having the same error message is a mismatch between tag name and selector name. For this case:

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

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

User · Answer

I had the same issue with angular RC 6 for some reason it doesn t allow passing component to other component using directives as component decorator to the parent component   But it if you import the child component via app module and add it in the declaration array the error goes away  There are no much explanation to why this is an issue with angular rc 6

User · Answer

I got this error when I had a filename and class exported mismatch   filename  list component ts  class exported  ListStudentsComponent  Changing from ListStudentsComponent to ListComponent fixed my issue

User · Answer

HUMAN ERROR - DON T BE MISLED BY THE ERROR MESSAGE  Why I got misled  The component I wanted to consume  ComponentA  was correctly declared in it s module  ModuleA   It was correctly exported there  too  The module  ModuleB  of the component  ComponentB  I am working in  had the import for ModuleA correctly specified  However  because of the error message being  lt  component-a-selector  gt  is not a known element   my entire focus was in thinking that it was a problem with ModuleA ComponentA as that is what the error message contained  I didn t think to look at the component I was trying to consume it from  I followed every single post in every threat about this  but was ultimately missing one vital step  What fixed it for me  frot io s answer prompted me to check my app module ts import list and the component I was working in  ComponentB  was not included

User · Answer

I had the same problem and i fixed by adding the component  MyComponentToUse   in exports array in the module where my component was declared  ModuleLower   Then i import ModuleLower in ModuleHigher  so i can reuse now my component   MyComponentToUse  in the ModuleLower and the ModuleHigher                NgModule                 declarations                    MyComponentToUse                                exports                    MyComponentToUse                                            export class ModuleLower                   NgModule                 imports                    ModuleLower                                            export class ModuleHigher

User · Answer

I fetch same problem for  lt flash-messages gt  lt  flash-messages gt  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

User · Answer

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

User · Answer

I ran across this exact problem  Failed  Template parse errors   app-login  is not a known element    with ng test   I tried all of the above replies  nothing worked   NG TEST SOLUTION   Angular 2 Karma Test   39 component-name  39  is not a known element   lt   I added declarations for the offending components into beforEach    declarations    to app component spec ts   EXAMPLE app component spec ts      import   LoginComponent   from    login login component       describe  AppComponent        gt      beforeEach async      gt        TestBed configureTestingModule         imports                               declarations            AppComponent          LoginComponent                 compileComponents

User · Answer

I was facing this issue on Angular 7 and the problem was after creating the module  I did not perform ng build  So I performed -   ng build ng serve   and it worked

User · Answer

A newbie mistake was generating the same error message in my case   The  app-root tag wasn t present in index html

User · Answer

For future problems   If you think you followed all the good answers and yet  the problem is there    Try turning the server off and on   I had the same problem  followed all the steps  couldn t solve it  Turn off  on and it was fixed

User · Answer

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   lt header-area gt  lt  header-area gt    you may need   lt app-header-area gt  lt  app-header-area gt

User · Answer

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

User · Answer

OnInit was automatically implemented on my class while using the ng new     key phrase on angular CLI to generate the new component   So after I removed the implementation and removed the empty method that was generated  the problem is resolved

User · Answer

When I had this problem  it was because I used  templateUrl  instead of just  template  in the decorator  since I use webpack and need to use require in it  Just be careful with the decorator name  in my case I generated the boilerplate code using a snippet  the decorator was created as    Component     selector        templateUrl   PATH TO TEMPLATE       but for webpack the decorator should be just  template  NOT  templateUrl   like so    Component     selector        template  require  PATH TO TEMPLATE        changing this solved the problem for me   wanna know more about the two methods  read this medium post about template vs templateUrl

User · Answer

Late answer for the thread  but I m sure there s more people that can use this information explained in another perspective   In Ionic  custom angular components are organized under a separate module called ComponentsModule  When the first component is generated using ionic generate component  along with the component  ionic generates the ComponentsModule  Any subsequent components gets added to the same module  rightly so   Here s 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 the ComponentsModule in the app  like any other angular modules  the ComponentsModules needs to be imported to the AppModule  ionic generate component  v 4 12  does not add this step  so this has to be added manually   Excerpt of 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

User · Answer

Ok  let me give the details of code  how to use other module s component    For example  I have M2 module  M2 module have comp23 component and comp2 component  Now I want to use comp23 and comp2 in app module  here is how    this is app module ts  see my comment        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       this is m2 module      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       My commend in code explain what you need to do here   now in app component html  you can use      lt app-comp23 gt  lt  app-comp23 gt    follow angular doc sample import modul

User · Answer

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

User · Answer

I had the same issue with Angular 7 when I am going to refine the test module by declaring the test component  Just added schemas    CUSTOM ELEMENTS SCHEMA   as follows and error was solved   TestBed configureTestingModule     imports   ReactiveFormsModule  FormsModule     declarations   AddNewRestaurantComponent     schemas    CUSTOM ELEMENTS SCHEMA

User · Answer

The error coming in unit test  when component is out of  lt router-outlet gt  in main app page  so should define the component in test file like below    lt app-header gt  lt  app-header gt   lt router-outlet gt  lt  router-outlet gt    and then needs to add in spec ts file as below   import   HeaderComponent   from    header header component    describe  AppComponent        gt      beforeEach async      gt        TestBed configureTestingModule         imports            RouterTestingModule                declarations            App enter code here Component          HeaderComponent  lt ------------------------                 compileComponents

User · Answer

For me path for templateUrl was not correct  I was using     shopping-list-edit component html   Whereas it should have been       shopping-list-edit component html   Silly mistake but happens when starting out  Hope that helps somebody in distress

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

Examples related to angular