ngx-modialog No provider for OverlayRenderer!

I am getting the following error when using the latest version of angular2-modal. Anyone seen this? I am not able to add OverlayRenderer as a provided in the child component as it gives me a compile time error of "not assignable to type provider"

Error: Uncaught (in promise): Error: No provider for OverlayRenderer! Error: DI Error at e (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at NoProviderError.BaseError [as constructor] (core.umd.js:1225) at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1400) at new NoProviderError (core.umd.js:1439) at ReflectiveInjector_.throwOrNull (core.umd.js:3370) at ReflectiveInjector.getByKeyDefault (core.umd.js:3407) at ReflectiveInjector.getByKey (core.umd.js:3357) at ReflectiveInjector.get (core.umd.js:3119) at AppModuleInjector.NgModuleInjector.get (core.umd.js:8914) at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12314) at ElementInjector.get (core.umd.js:12169) at ReflectiveInjector_.getByKeyDefault (core.umd.js:3404) at ReflectiveInjector.getByKey (core.umd.js:3357) at ReflectiveInjector.get (core.umd.js:3119) at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12314) at e (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at NoProviderError.BaseError [as constructor] (core.umd.js:1225) at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1400) at new NoProviderError (core.umd.js:1439) at ReflectiveInjector_.throwOrNull (core.umd.js:3370) at ReflectiveInjector.getByKeyDefault (core.umd.js:3407) at ReflectiveInjector.getByKey (core.umd.js:3357) at ReflectiveInjector.get (core.umd.js:3119) at AppModuleInjector.NgModuleInjector.get (core.umd.js:8914) at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12314) at ElementInjector.get (core.umd.js:12169) at ReflectiveInjector_.getByKeyDefault (core.umd.js:3404) at ReflectiveInjector.getByKey (core.umd.js:3357) at ReflectiveInjector.get (core.umd.js:3119) at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12314) at e (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at h (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at h (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1 at n.invokeTask (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at Object.onInvokeTask (core.umd.js:4396) at n.invokeTask (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at r.runTask (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at rt (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1) at HTMLAnchorElement.invoke (node_modules?v=LfaI-xx5s3HEsZyOcLQ3LZYBdMfuqgxF155sPx15AU01:1)

Jan 03 '17 19:01 angular2newb

same here

Jan 08 '17 11:01 RbkGh

Had a similar issue. You need to resolve OverlayRenderer as DOMOverlayRenderer. My code:

import { ModalModule, OverlayRenderer, DOMOverlayRenderer, Overlay } from 'angular2-modal';
import { Modal, BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

const MODAL_PROVIDERS = [
  Modal,
  Overlay,
  { provide: OverlayRenderer, useClass: DOMOverlayRenderer }
];

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    ...
    ModalModule,
    BootstrapModalModule
  ],
  providers: [
    ...
    MODAL_PROVIDERS
  ]
})
export class AppModule {
...
}

Jan 10 '17 11:01 Romanchuk

Had the same issue but resolved it by adding .forRoot() to the ModalModule import:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    ModalModule.forRoot(),
    BootstrapModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Hope this helps someone out :)