Angular2 - Directive does not work if not declared in the same module

Question

I have a directive and I want to use it in several modules. Declaring it on each module causes an error. Thus, I tried to declare it in a common module and import this common module into other modules. However, this did not work. It only works when it is declared exactly on the component's own module.

Here is my SharedModule :

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { GeneralDataService } from './general-data.service'; import {ModalDirective} from '../directives/modal.directive'; @NgModule({ imports: [ CommonModule ], providers: [GeneralDataService], declarations: [ModalDirective] }) export class SharedModule { } 

And the module I want to use ModalDirective :

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MyComponent } from './patient.component'; import {SharedModule} from '../shared/shared.module'; @NgModule({ imports: [ CommonModule, SharedModule ], providers: [ ], declarations: [ MyComponent ] }) export class MyModule { } 

In the MyComponent component:

 export class MyComponent implements OnInit, AfterViewInit { @ViewChild(ModalDirective) modal: ModalDirective; ... } 

modal in MyComponent is undefined (even in ngAfterViewInit ) if ModalDirective not declared in MyModule . Does anyone know how to fix this?

Answer 1

In SharedModule you need export ModalDirective

 ... @NgModule{( ... exports: [ModalDirective] )} export class SharedModule { ... } 

See docs on common modules for more details.