Issue with NgbModelBackdrop

ERROR { Error: Uncaught (in promise): Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents?
Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8581:34)
    at CodegenComponentFactoryResolver.resolveComponentFactory (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8645:19)
    at new NgbModalStack (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:70536:59)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:20)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:107)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)
    at NgModuleRef_.get (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:16598:16)
    at resolvePromise (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:136092:31)
    at resolvePromise (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:136063:17)
    at /home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:136141:17
    at ZoneDelegate.invokeTask (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135693:31)
    at Object.onInvokeTask (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:9412:33)
    at ZoneDelegate.invokeTask (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135692:36)
    at Zone.runTask (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135460:47)
    at drainMicroTaskQueue (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135870:35)
    at ZoneTask.invokeTask (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135771:21)
    at Server.ZoneTask.invoke (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:135756:48)
  rejection: 
   { Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8581:34)
    at CodegenComponentFactoryResolver.resolveComponentFactory (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8645:19)
    at new NgbModalStack (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:70536:59)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:20)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:107)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)
    at NgModuleRef_.get (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:16598:16)
     ngComponent: { [Function: NgbModalBackdrop] decorators: [Array], ctorParameters: [Function] },
     __zone_symbol__currentTask: 
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: { Error: No component factory found for NgbModalBackdrop. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8581:34)
    at CodegenComponentFactoryResolver.resolveComponentFactory (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:8645:19)
    at new NgbModalStack (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:70536:59)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:20)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)
    at _createClass (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15418:107)
    at _createProviderInstance$1 (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15388:26)
    at resolveNgModuleDep (/home/jinna/JINNA-FOLDER/angular-cli/gluoed-app/gluoed/dist/server.js:15373:17)

Here is my app.module.ts

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './components/layouts/header/header.component';
import { FooterComponent } from './components/layouts/footer/footer.component';
import { MainComponent } from './components/layouts/main/main.component';
import { LoaderComponent } from './components/layouts/loader/loader.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { YoutubeTrendingComponent, NgbdModalContentComponent } from './components/youtube-trending/youtube-trending.component';
import { TopHeadlinesComponent } from './components/top-headlines/top-headlines.component';
import { YoutubeService } from './shared/services/youtube.service';
import { GoogleHotTrendsService } from './shared/services/google-hot-trends.service';
import { TwitterHotTrendsService } from './shared/services/twitter-hot-trends.service';
import { InstagramHotTrendsService } from './shared/services/instagram-hot-trends.service';
import { NewsApiService } from './shared/services/news-api.service';
import { CountryService } from './shared/services/country.service';
import { NumaralsPipe } from './shared/pipes/numarals.pipe';
import { TruncatePipe } from './shared/pipes/truncate.pipe';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, JsonpModule } from '@angular/http';
import { NgbModalBackdrop } from '@ng-bootstrap/ng-bootstrap/modal/modal-backdrop';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    MainComponent,
    LoaderComponent,
    NotFoundComponent,
    YoutubeTrendingComponent,
    TopHeadlinesComponent,
    NumaralsPipe,
    TruncatePipe,
    NgbdModalContentComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'gluoed-app' }),
    AppRoutingModule,
    NgbModule.forRoot(),
    BrowserModule.withServerTransition({ appId: 'gluoed' }),
    AppRoutingModule,
    HttpClientModule,
    BrowserTransferStateModule,
    HttpModule,
    JsonpModule,
    FormsModule
  ],
  providers: [
    NgbModalBackdrop,
    YoutubeService,
    GoogleHotTrendsService,
    TwitterHotTrendsService,
    InstagramHotTrendsService,
    NewsApiService,
    CountryService],
  bootstrap: [AppComponent],
  entryComponents: [
    HeaderComponent,
    FooterComponent,
    MainComponent,
    LoaderComponent,
    NotFoundComponent,
    YoutubeTrendingComponent,
    TopHeadlinesComponent,
    NgbdModalContentComponent,
    NgbModalBackdrop
  ],
})
export class AppModule { }

5 thoughts on “Issue with NgbModelBackdrop

  1. guys, Injector saved my life.
    Inside your component change this:
    screen shot 2017-12-21 at 23 45 02
    to this:
    screen shot 2017-12-22 at 08 53 41
    So NgbModal will be instantiated only for browser version and you wouldn’t see error about NgbModalBackdrop

    P.S. Angular 5.1.1

  2. I was stuck in exactly the same problem this whole thread is about and then got rid of it by just following these steps-

    1. If you’re using Angular ≥ 9.0.0 and ng-bootstrap ≥ 6.0.0, you also have to install the @angular/localize polyfill:

    ng add @angular/localize
    2. import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;

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

    That’s it !!