No component factory found for ModalBackdropComponent

[wolfgangmeyers]

Getting this error when trying to pop up a new modal window. My setup closely follows the demo, but I am using systemjs for module loading currently. ng2-bootstrap version 1.1.3. Adding [config]="{backdrop: false}" prevents the error and allows the modal to launch, but does so with no backdrop.

[wolfgangmeyers]

platform-browser.umd.js:937 Error: No component factory found for ModalBackdropComponent
    at NoComponentFactoryError.BaseException [as constructor] (core.umd.js:4472)
    at new NoComponentFactoryError (core.umd.js:9058)
    at _NullComponentFactoryResolver.resolveComponentFactory (core.umd.js:9067)
    at NgModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (core.umd.js:9092)
    at ComponentsHelper.appendNextToLocation (components-helper.service.js:75)
    at ComponentsHelper.appendNextToRoot (components-helper.service.js:98)
    at ModalDirective.showBackdrop (modal.component.js:189)
    at ModalDirective.show (modal.component.js:108)
    at FileBrowserComponent.promptForCopy (filebrowser.component.ts:77)
    at DebugAppView._View_FileBrowserComponent10._handle_click_2_0 (FileBrowserComponent.ngfactory.js:2042)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4402next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265ZoneTask.invoke @ zone.js:433

[valorkin]

Know issue since rc.5, working on it

[wolfgangmeyers]

On 1.1.5 now, this is still a problem.

[valorkin]

Show your app module definition?

[wolfgangmeyers]

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';

import { PopoverModule } from "ng2-popover";
import { ModalDirective, ModalModule } from 'ng2-bootstrap';

import { AppComponent }  from './app.component';
import { DashboardComponent } from './dashboard.component';
import { LoggingService } from './logging/service';
import { routing } from './app.routing';
import { ComponentsHelper, ModalBackdropComponent } from 'ng2-bootstrap';

// convert http response observable to promise
import 'rxjs/add/operator/toPromise';

@NgModule({
  imports:      [
    BrowserModule,
    routing,
    FormsModule,
    PopoverModule,
    HttpModule,
    ModalModule,
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    ModalDirective
  ],
  bootstrap:    [ AppComponent ],
  providers: [
    LoggingService,
    ComponentsHelper,
    ModalBackdropComponent
  ]
})
export class AppModule { }

[valorkin]

Import modal module, not directives

[valorkin]

Update: remove export of directives and components

[wolfgangmeyers]

I've done all of the above. The rest of the app still works, but still getting No component factory found for ModalBackdropComponent error

[valorkin]

ModalBackdropComponent should be in declarations

[wolfgangmeyers]

That also doesn't seem to resolve it. When I have time I will put together a reproduction scenario and upload it.

[valorkin]

Can you try to inject whole ng2 bootstrap module?
I need to unblock you, issue can be fixed later

[wolfgangmeyers]

Imported Ng2BootstrapModule, same behavior remains. Note that this is not blocking, I'm just hoping to get it resolved at some point. I am still using the [config]="{backdrop: false}" workaround to avoid the issue.

[wolfgangmeyers]

After deleting my dist folder and re-running webpack, I now see a new error...
compiler.umd.js:14256Uncaught Error: Type ModalBackdropComponent is part of the declarations of 2 modules: ModalModule and AppModule! Please consider moving ModalBackdropComponent to a higher module that imports ModalModule and AppModule. You can also create a new NgModule that exports and includes ModalBackdropComponent then import that NgModule in ModalModule and AppModule.

[wolfgangmeyers]

Removed ModalBackdropComponent from AppModule declarations, and I see a backdrop now!

[wolfgangmeyers]

ModalModule works as well. Apparently I had stale compiled typescript.

[valorkin]

Awesome :)

[wolfgangmeyers]

Thanks for the help!

[samuelkavin]

Hi, I got same issue. I already included modal component in entryComponents of NgModule but there still showing this error message.
AsCompanyProfileComponent.html:134 ERROR Error: No component factory found for RemoveRecipientModalComponent. Did you add it to @NgModule.entryComponents?

Any idea, please?

[polyglot0027]

Guys, check what the actual ModalModule you have in AppComponent, from 'angular2-modal' or 'ngx-bootstrap'. The last one should be imported

[gentunian]

I came across the same problem using an already structured app. I needed to add something like this into the core modules:

...
@NgModule({
  imports: [
    ...
    ModalModule.forRoot()
  ],
...

[jairosolarte]

add ModalBackdropComponent to entryComponents: in module

@NgModule({
imports: [...],
exports: [...],
entryComponents: [ModalBackdropComponent,..],
declarations: [ModalBackdropComponent,...],
providers: [...]

[rcollette]

Make sure the NgbModalModule is imported in the same module where the ModalComponent is declared and placed in the entryComponents property. Otherwise I think it winds up looking for the component in the root scope.

@NgModule({
  declarations: [SomeModalComponent],
  imports: [
    NgbModalModule
  ],
  entryComponents: [SomeComponent]
})

[glokesh94]

Import NgbModule in app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({ imports: [NgbModule], }) export class YourAppModule { }