Comment déclarer une directive à l'échelle mondiale pour tous les modules Angulaire?

Je suis l'élaboration d'un dépôt Github qui suit le tutoriel officiel Angulaire (Tour des Héros). Vous pouvez voir tout le code ici:
https://github.com/Ismaestro/angular7-example-app

Mon problème, c'est que j'ai une directive déclarée dans le module principal de l'application (app.module) et si je l'utilise à l'intérieur de la AppComponent il fonctionne bien (la directive ne mettre en surbrillance le texte à l'intérieur d'un élément du DOM).

Mais j'ai un autre module appelé HeroesModule dans AppModule, et à l'intérieur d'un composant de ce module, la présente directive ne fonctionne pas. Le code principal, ici:

app/app.le 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/héros/héros.le module.ts

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

app/shared/highlight.la 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.composante.ts

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

app/héros/héros-liste/-héros de la liste.composante.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>

Vous pouvez le voir, de l'installer et de le tester par vous-même dans le dépôt Github, si vous en avez besoin.

Merci!

1. La directive doit appartenir à un module de 2. Une option est que vous pouvez créer un module séparé pour tous vos directives et injecter le nouveau dans votre principal module d'application
Il appartient à AppModule!
Le déplacer vers un autre module (module de fonction) et ensuite d'ajouter ce module à import: [] de chaque module à l'endroit où vous souhaitez l'utiliser.
J'ai mis à jour mon commentaire
Vous avez raison, bien sûr. l'exception réponse est fausse. vous auriez encore besoin de t d'importation pour chaque module que vous avez besoin de ses exportations. Seulement injecteurs/services sont hissés à la racine ( à moins paresseux)

OriginalL'auteur ismaestro | 2017-01-06