Use component from another module
Solution 1
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] // <== export the component you want to use in another module
})
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 @NgModule
s.
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 useZComponent
in its template becausedirectives
array ofTransitive module Y
doesn't containZComponent
becauseYModule
has not importedZModule
whose transitive module containsZComponent
inexportedDirectives
array. -
Within
XComponent
template we can useZComponent
becauseTransitive module X
has directives array that containsZComponent
becauseXModule
imports module (YModule
) that exports module (ZModule
) that exports directiveZComponent
-
Within
AppComponent
template we can't useXComponent
becauseAppModule
importsXModule
butXModule
doesn't exportsXComponent
.
See also
-
why lazy loaded module has to import commonModule? Angular 2
-
What is the difference between declarations, providers, and import in NgModule?
Solution 2
(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 // <-- 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 the "ImportantCopmonent", by importing the 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 { }
Solution 3
You have to export
it from your NgModule
:
@NgModule({
declarations: [TaskCardComponent],
exports: [TaskCardComponent],
imports: [MdCardModule],
providers: []
})
export class TaskModule{}
Solution 4
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
Related videos on Youtube
Evgeni Dimitrov
Updated on February 06, 2022Comments
-
Evgeni Dimitrov over 2 years
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 componentTaskCard
. Now I want to use theTaskCard
in one of the components of theAppModule
(theBoard
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
inBoardComponent
? -
Rohit Rane over 7 yearsHow do I use this "TaskCardComponent" in a route definition in the Importing module?
-
Arun over 7 yearsThis Works, till TaskModule is imported in AppModule. It fails when TaskModule is lazyloaded.
-
Royi Namir almost 7 yearsWhat a great answer. Did you create the drawing? If so, I'm speechless. Not everyone put such effort in their answers. Thank you
-
yurzui almost 7 years@Royi Yes, this is my picture :) It's based on source code from github.com/angular/angular/blob/master/packages/compiler/src/…
-
Karty over 6 years@yuruzi, i cannot pass the dom node directly without the reference stackoverflow.com/questions/47246638/… plnkr.co/edit/DnnjFBa3HLzFKNIdE4q5?p=preview
-
OmGanesh over 4 years@yurzui ... I don't understand how can YComponent export ZModule, since I am seeing that as a separate file (y.module.ts) and it doesn't have any import so as to export other module (which is z.module.ts) [bear me if its basic question]
-
Muzaffar Mahmood over 4 yearsNgModuleFactoryLoader is deprecated now so what is its best alternate way to do this thing?
-
Praveen Pandey about 4 yearsHi @yurzui I have this confusion, lets say I have a module A which exports 10 components. If I import this module A into another module B(which needs just one component from module A) 1. Will it import all the classes exported from module A? 2. If Yes how can I avoid it. 3. Does it depend of what I import from module A will be added to module B 4. Will it affect memory or performance to load entire module with 10 components thoe u need 1. I was trying to find the answers to this but could not find a suitable answer.
-
AhammadaliPK almost 4 yearsone of the best answers i have ever seen in SO......
-
Amor.o over 3 yearsThe best answer ever, he asked for a finger he gave him a hand xD, thanks bro
-
Joshua Foxworth about 3 yearsAlthough not as verbose as the original, these are the two things you need to do and exporting the component is the one most ofter forgotten. This is a simper answer.
-
albanx about 2 yearsDoes importing a module (that exports the wanted component), affects the bundle size of the destination module, for example if my destination module uses only 1 on 4 components that the source module has, will this make the desitnatino module bundle include the 4 components or just 1?
-
Alexander almost 2 yearsHow to make use of other components if my component does not have its own module? In my case this component does not have the module, because it overrides another, built-in 3rd party component in some 3rd party module which I don't have access to.... I've tried to import other components module in app.module, but got site loading loop...