Angular 2 Use a component from another module

Question

I have Angular 2 (version 2.0.0 - final) application created using angular-cli.

When I create the component and add it to the AppModule declarations array, all this is good, it works.

I decided to separate the components, so I created a TaskModule and a TaskCard component. Now I want to use TaskCard in one of the AppModule components ( 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 at https://github.com/evgdim/angular2 (kanban-board folder)

What am I missing? What do I need to do to use TaskCardComponent in BoardComponent ?

Answer 1

The basic rule here is:

The selectors that are used during compilation of the component template are determined by the module that declares this component and the transitive closure of the export of this module.

So try exporting this:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

What should i export?

Export declared classes that components in other modules should reference in their templates. These are your public classes. If you do not export the class, it remains private, visible only to another component declared in this module.

At the moment when you create a new module, lazy or not, any new module and declare something in it, this new module is in a clean state (as Ward Bell said in https://devchat.tv/adv-in- angular / 119). -aia-dodging-common-pitfalls2 )

Angular creates a transitive module for each of @NgModule s.

This module collects directives that are either imported from another module (if the transitive module of the imported module has exported directives) or declared in the current module .

When angular compiles a template that belongs to module X , those directives are used that were compiled 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

Thus, according to the image above

• YComponent cannot use ZComponent in the template because the directives array of the Transitive module Y does not contain ZComponent because the YModule not imported. ZModule which transitively contains the ZComponent in the exportedDirectives array.

• In the XComponent template XComponent we can use ZComponent because the Transitive module X has an array of directives that contains ZComponent because the import YModule ( YModule ), which exports the module ( ZModule ), which exports the ZComponent directive

• In the AppComponent template AppComponent we cannot use XComponent because the AppModule imports the XModule but the XModule does not export the XComponent .

see also

• why should a lazy loaded module have to import a commonModule? Corner 2

• Frequently Asked Questions on Angle Modules

• What is the difference between ads, suppliers and imports in NgModule

Answer 2

You must export from your NgModule :

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

Answer 3

(Angular 2 - Angular 7)

A component can be declared in only one module. To use a component from another module, you need to perform two simple tasks:

1. Export component to another module
2. Import another module into the current module

1st module:

We have a component (let's call it "ImportantCopmonent") that we want to reuse on the page of the 2nd module.

 @NgModule({ declarations: [ FirstPage, ImportantCopmonent // <-- Enable using the component html tag in current module ], imports: [ IonicPageModule.forChild(NotImportantPage), TranslateModule.forChild(), ], exports: [ FirstPage, ImportantCopmonent // <--- Enable using the component in other modules ] }) export class FirstPageModule { } 

---

2nd module:

Reuses "ImportantCopmonent" by importing FirstPageModule

 @NgModule({ declarations: [ SecondPage, Example2ndComponent, Example3rdComponent ], imports: [ IonicPageModule.forChild(SecondPage), TranslateModule.forChild(), FirstPageModule // <--- this Imports the source module, with its exports ], exports: [ SecondPage, ] }) export class SecondPageModule { } 

Answer 4

Note that in order to create the so-called "function module" you need to import the CommonModule inside it. So, the initialization code for your module 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 { } 

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

Answer 5

No matter what you want to use from another module, just put it in the export array. Like this -

  @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule] }) 

Answer 6

RESOLVED HOW TO USE THE COMPONENT STATED IN THE MODULE IN ANOTHER MODULE.

Based on an explanation from Roya Namira (Thanks a lot). There is no part to reuse the component declared in the module in any other module while delayed loading is used.

1st: export the component to the module that contains it:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== 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 ] <== this line }) export class TaskModule{} 

Thus, the second module imports the first module, which imports and exports the component.

When we import the module into the second module, we need to export it again. Now we can use the first component in the second module.

Answer 7

One big and great approach is to load a module from 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<any>) => { const entryComponent = (<any>moduleFactory.moduleType).entry; const moduleRef = moduleFactory.create(this.injector); const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent); this.lazyOutlet.createComponent(compFactory); }); } 

I got it from here .

Answer 8

@yurzui you have the right solution and thanks for the explanation.

I had a problem and this line:

export: [Component] decided.