Use component from another module
(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 { }
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
Angular Module FAQs
What is the difference between declarations, providers, and import in NgModule?