Use component from another module

Question

I have Angular 2 0 0 app generated with angular-cli    When I create a component and add it to AppModule s declarations array it s all good  it works    I decided to separate the components  so I created a TaskModule and a component TaskCard  Now I want to use the TaskCard in one of the components of the AppModule  the Board component    AppModule   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   FormsModule   from   angular forms   import   HttpModule   from   angular http    import   AppComponent   from    app component   import   BoardComponent   from    board board component   import   LoginComponent   from    login login component    import   MdButtonModule   from   angular2-material button   import   MdInputModule   from   angular2-material input   import   MdToolbarModule   from   angular2-material toolbar    import   routing  appRoutingProviders  from    app routing   import   PageNotFoundComponent   from    page-not-found page-not-found component    import   UserService    from    services user user service   import   TaskModule   from    task task module      NgModule     declarations        AppComponent      BoardComponent    I want to use TaskCard in this component     LoginComponent      PageNotFoundComponent        imports        BrowserModule      FormsModule      HttpModule      MdButtonModule      MdInputModule      MdToolbarModule      routing      TaskModule    TaskCard is in this module        providers   UserService     bootstrap   AppComponent     export class AppModule       TaskModule   import   NgModule   from   angular core   import   TaskCardComponent   from    task-card task-card component    import   MdCardModule   from   angular2-material card     NgModule     declarations   TaskCardComponent     imports   MdCardModule     providers        export class TaskModule     The whole project is available on https   github com evgdim angular2  kanban-board folder   What am I missing  What do I have to do to use TaskCardComponent in BoardComponent

User · Answer

Note that in order to create a so called "feature module", you need to import CommonModule inside it. So, your module initialization code will look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TaskCardComponent } from './task-card/task-card.component';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
    CommonModule,
    MdCardModule 
  ],
  declarations: [
    TaskCardComponent
  ],
  exports: [
    TaskCardComponent
  ]
})
export class TaskModule { }

More information available here: https://angular.io/guide/ngmodule#create-the-feature-module

User · Answer

Whatever you want to use from another module  just put it in the export array  Like this-     NgModule     declarations   TaskCardComponent     exports   TaskCardComponent     imports   MdCardModule

User · Answer

Angular 2 - Angular 7   Component can be declared in a single module only  In order to use a component from another module  you need to do two simple tasks    Export the component in the other module Import the other module  into the current module   1st Module    Have a component  lets call it   ImportantCopmonent    we want to re-use in the 2nd Module s page    NgModule   declarations        FirstPage      ImportantCopmonent     lt -- Enable using the component html tag in current module    imports      IonicPageModule forChild NotImportantPage     TranslateModule forChild       exports        FirstPage      ImportantCopmonent     lt --- Enable using the component in other modules        export class FirstPageModule         2nd Module    Reuses the  ImportantCopmonent   by importing the FirstPageModule   NgModule   declarations        SecondPage      Example2ndComponent      Example3rdComponent    imports      IonicPageModule forChild SecondPage     TranslateModule forChild      FirstPageModule     lt --- this Imports the source module  with its exports     exports        SecondPage       export class SecondPageModule

User · Answer

The main rule here is that   The selectors which are applicable during compilation of a component template are determined by the module that declares that component  and the transitive closure of the exports of that module s imports   So  try to export it    NgModule     declarations   TaskCardComponent     imports   MdCardModule     exports   TaskCardComponent   lt    this line    export class TaskModule     What should I export      Export declarable classes that components in other modules should be   able to reference in their templates  These are your public classes    If you don t export a class  it stays private  visible only to other   component declared in this module    The minute you create a new module  lazy or not  any new module and you declare anything into it  that new module has a clean state as Ward Bell said in https   devchat tv adv-in-angular 119-aia-avoiding-common-pitfalls-in-angular2   Angular creates transitive module for each of  NgModules    This module collects directives that either imported from another module if transitive module of imported module has exported directives  or declared in current module    When angular compiles template that belongs to module X it is used those directives that had been collected in X transitiveModule directives   compiledTemplate   new CompiledTemplate      false  compMeta type  compMeta  ngModule  ngModule transitiveModule directives     https   github com angular angular blob 4 2 x packages compiler src jit compiler ts L250-L251    This way according to the picture above    YComponent can t use ZComponent in its template because directives array of Transitive module Y doesn t contain ZComponent because YModule has not imported ZModule whose transitive module contains ZComponent in exportedDirectives array  Within XComponent template we can use ZComponent because Transitive module X has directives array that contains ZComponent because XModule imports module  YModule  that exports module  ZModule  that exports directive ZComponent Within AppComponent template we can t use XComponent because AppModule imports XModule but XModule doesn t exports XComponent     See also   why lazy loaded module has to import commonModule  Angular 2 Angular Module FAQs What is difference between declarations  providers and import in NgModule

User · Answer

One big and great approach is to load the module from a NgModuleFactory  you can load a module inside another module by calling this   constructor private loader  NgModuleFactoryLoader  private injector  Injector      loadModule path  string        this loader load path  then  moduleFactory  NgModuleFactory lt any gt     gt            const entryComponent     lt any gt moduleFactory moduleType  entry          const moduleRef   moduleFactory create this injector           const compFactory   moduleRef componentFactoryResolver resolveComponentFactory entryComponent           this lazyOutlet createComponent compFactory               I got this from here

User · Answer

You have to export it from your NgModule    NgModule     declarations   TaskCardComponent     exports   TaskCardComponent     imports   MdCardModule     providers        export class TaskModule

User · Answer

SOLVED HOW TO USE A COMPONENT DECLARED IN A MODULE IN OTHER MODULE   Based on Royi Namir explanation  Thank you so much    There is a missing part to reuse a component declared in a Module in any other module while lazy loading is used    1st  Export the component in the module which contains it    NgModule     declarations   TaskCardComponent     imports   MdCardModule     exports   TaskCardComponent   lt    this line    export class TaskModule     2nd  In the module where you want to use TaskCardComponent   import   NgModule   from   angular core   import   CommonModule   from   angular common   import   MdCardModule   from   angular2-material card     NgModule     imports       CommonModule     MdCardModule         providers        exports   MdCardModule    lt    this line    export class TaskModule     Like this the second module imports the first module which imports and exports the component   When we import the module in the second module we need to export it again  Now we can use the first component in the second module

[angular] Use component from another module

Examples related to angular

Examples related to typescript

Examples related to angular-module