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
?
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] <== 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 @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 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