Ngx-bootstrap: There is no directive with "exportAs" set to "bs-modal"

[tutsblog]

There is no directive with "exportAs" set to "bs-modal" in Angular 4

[meta72]

I can confirm this with ngx-bootstrap version 1.6.6, bootstrap version 3.3.7 and angular version 4.0.2 from npm.
I copied the code from the Child Modal section on the demo page and get the same error.

[meta72]

I could fix this for me by importing ModalModule to the AppModule.

import { ModalModule } from "ngx-bootstrap";
@NgModule({
  imports: [
    ModalModule.forRoot()
    ]
})

If you are using a modal in a component in a seperate module as I did, importing ModalModule in that seperate module isn't enough. You either have to also import it in your AppModule or export it from the seperate module.

[valorkin]

it is definitely has export https://github.com/valor-software/ngx-bootstrap/blob/development/src/modal/modal.component.ts#L36
it is kinda known issue with NgModules and DI understanding
ModalModule.forRoot() should be in app module
ModalModule should be imported in module where you plan to use it

[edgarMejia]

If you are using share.module.ts :)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalModule } from "ngx-bootstrap";

@NgModule({
    imports: [
        CommonModule,
        ModalModule.forRoot()
    ],
    declarations: [],
    exports: [
        ModalModule
    ]
})
export class SharedModule { }