How to declare a directive globally for all modules?

Question

I'm developing a Github repo which follows the offical tutorial of Angular (Tour of Heroes). You can see all the code here.

My problem, is that I have a directive declared in the main module of the app (app.module) and, if I use it inside the AppComponent, it works good (the directive only highlight a text inside a DOM element).

But I have another module called HeroesModule within AppModule, and inside a component of this module, this directive doesn't work.

The main code, here:

app/app.module.ts

...  import { HighlightDirective } from "./shared/highlight.directive";  @NgModule({     imports: [         BrowserModule,         FormsModule,         HttpModule,         InMemoryWebApiModule.forRoot(InMemoryDataService),         AppRoutingModule,         CoreModule,         HeroesModule     ],     declarations: [         AppComponent,         HeroTopComponent,         HighlightDirective <-------     ],     providers: [         { provide: APP_CONFIG, useValue: AppConfig }     ],     bootstrap: [ AppComponent ] })  ... 

app/heroes/heroes.module.ts

@NgModule({     imports: [         CommonModule,         FormsModule,         HeroRoutingModule     ],     declarations: [         HeroListComponent,         HeroSearchComponent,         HeroDetailComponent,         HeroFormComponent     ],     providers: [         HeroService     ],     exports: [         HeroSearchComponent     ] }) 

app/shared/highlight.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';  @Directive({ selector: '[tohHighlight]' })  export class HighlightDirective {     constructor(el: ElementRef) {         el.nativeElement.style.backgroundColor = 'yellow';     } } 

app/app.component.ts

<h1 tohHighlight>{{title}}</h1> <----- HERE WORKS <toh-nav></toh-nav> <router-outlet></router-outlet> 

app/heroes/hero-list/hero-list.component.ts

<div *ngIf="selectedHero">     <h2>         {{selectedHero.name | uppercase}} is my hero     </h2>     <p tohHighlight>Test</p> <----- HERE IT DOESN'T     <button (click)="gotoDetail()">View Details</button> </div> 

You can see, install it and test it by yourself in the Github repo, if you need it.

Answer 1

According @CrazyMac's comment, a good way would be to create a DirectivesModule. Inside this module you can declare and import all your directives then you will be able to import this module anywhere you want.

app/modules/directives/directives.module.ts

import { NgModule } from '@angular/core'; import { HighlightDirective } from './highlight.directive';  @NgModule({   imports: [],   declarations: [HighlightDirective],   exports: [HighlightDirective] }) export class DirectivesModule { } 

app/modules/directives/highLight.directive.ts

import { Directive, ElementRef } from '@angular/core';  @Directive({ selector: '[myHighlight]' }) export class HighlightDirective {   constructor(el: ElementRef) {     el.nativeElement.style.backgroundColor = 'yellow';   } } 

app/modules/otherModule/other-module.module.ts

import { DirectivesModule } from '../directives/directives.module';  @NgModule({   imports: [     DirectivesModule   ],   declarations: [] }) export class OtherModule { }