Import Angular Directive Globally

Question

I'm trying to find out if there's a way to define .forRoot() in the module for one of my Directives that we use throughout the entire app. I'd like to be able to import that module in my app.module.ts once, so I can set some defaults for the entire app as well.

My Directive is a wrapper for a JavaScript library, which is why there are some properties I'd like to be defined once.

Is this possible? I've been googling, but haven't seen a good example of this, though I know some nom packages are doing it.

Directive Module

import { ModuleWithProviders, NgModule } from '@angular/core';

import { MyDirective } from './my.directive';

@NgModule({
    declarations: [
        MyDirective
    ],
    exports: [
        MyDirective
    ]
})
export class MyModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: MyModule
        }
    }
}

App Module

@NgModule({
    imports: [
        ...
        MyModule.forRoot()
        ...
    ],
    declarations: [ ... ],
    providers: [ ... ],
    bootstrap: [AppComponent]
})
export class AppModule { }

When I try the above, the Directive is not available throughout the app. I still have to import MyModule into the individual modules.

Example use error Can't bind to 'wbDirective' since it isn't a known property of 'span'.