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”

February 25, 2021 at 11:16 am

guys, Injector saved my life.
Inside your component change this:

to this:

So NgbModal will be instantiated only for browser version and you wouldn’t see error about NgbModalBackdrop

P.S. Angular 5.1.1
February 25, 2021 at 11:16 am

@cravter God bless you!
February 25, 2021 at 11:16 am

Add NgbModule.forRoot() in your imports, it solves the problem
February 25, 2021 at 11:16 am

Add NgbModule.forRoot() in your imports, it solves the problem

Thank you!
But now import NgbModule without forRoot().
February 25, 2021 at 11:16 am
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 !!

Cookie	Duration	Description
cookielawinfo-checbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.