How to import component into another root component in Angular 2

Question

I am trying to import component from one file another root component file  it give error as        zone js 484 Unhandled Promise rejection  Template parse errors     courses  is not a known element    1  If  courses  is an Angular component  then verify that it is part of this module    2  If  courses  is a Web Component then add  CUSTOM ELEMENTS SCHEMA  to the   NgModule schema  of this component to suppress this message    My First Angular 2 App ERROR -      AppComponent 0 31   Zone     Task  Promise then   Value  Error  Template parse errors       Error  Template parse errors     courses  is not a known element    My app component ts be like  root component file   import   Component   from   angular core   import  CoursesComponent  from    courses component     Component     selector   my-app     template    lt h1 gt My First Angular 2 App lt  h1 gt  lt courses gt  lt  courses gt      directives  CoursesComponent       export class AppComponent       and my courses component ts be    import   Component   from   angular core    Component     selector   courses     template    lt h1 gt courses lt  h1 gt      export class CoursesComponent       while importing courses component from courses component ts file inside app component i am not able declare directive inside  Component    directives  CoursesComponent  giving error to me  Please advise solution over it

User · Answer

Angular RC5  amp  RC6  If you are getting the above mentioned error in your Jasmine tests  it is most likely because you have to declare the unrenderable component in your TestBed configureTestingModule        The TestBed configures and initializes an environment for unit testing and provides methods for mocking creating injecting components and services in unit tests    If you don t declare the component before your unit tests are executed  Angular will not know what  lt courses gt  lt  courses gt  is in your template file   Here is an example   import  async  ComponentFixture  TestBed  from   angular core testing   import  AppComponent  from     app component   import  CoursesComponent  from    courses component    describe  CoursesComponent        gt      let component  CoursesComponent    let fixture  ComponentFixture lt CoursesComponent gt      beforeEach async      gt        TestBed configureTestingModule         declarations            AppComponent          CoursesComponent                imports            BrowserModule            If you have any other imports add them here                     compileComponents              beforeEach      gt        fixture   TestBed createComponent CoursesComponent       component   fixture componentInstance      fixture detectChanges             it  should create        gt        expect component  toBeTruthy

User · Answer

You should declare it with declarations array meta property  of  NgModule as shown below  RC5 and later    import  CoursesComponent  from    courses component     NgModule     imports         BrowserModule     declarations    AppComponent CoursesComponent       lt ----here   providers                 bootstrap       AppComponent

User · Answer

For Angular RC5 and RC6 you have to declare component in the module metadata decorator s declarations key  so add CoursesComponent in your main module declarations as below and remove directives from AppComponent metadata   import   NgModule   from   angular core   import   BrowserModule   from   angular platform-browser    import   AppComponent   from    app component   import   CoursesComponent   from    courses component     NgModule     imports         BrowserModule      declarations    AppComponent  CoursesComponent      bootstrap       AppComponent      export class AppModule

User · Answer

above answers In simple words   you have to register under  NgModule s   declarations        AppComponent  YourNewComponentHere        of app module ts  do not forget to import that component

[angular] How to import component into another root component in Angular 2

Examples related to angular

Examples related to angular2-directives