Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with NgbModelBackdrop

See original GitHub issue
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 { }

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

66reactions
harshbhardwajcsitcommented, Oct 9, 2018

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

15reactions
cravtercommented, Dec 22, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Backdrop z-Index forced to 1050 · Issue #2686 - GitHub
I have an issue with v13 too. The z-index is set to 1055 and the overlay is over all the page: image. HTML...
Read more >
angular/ngbmodal: backdropClass doesnt work - Stack Overflow
Backdrops of ng-bootstrap modals are injected into body tag. Don't change app ViewEncapsulation, ... It's gonna cause you a lot of problems.
Read more >
Modal - Angular powered Bootstrap
Dismisses the modal with an optional reason value. The NgbModalRef.result promise will be rejected with the provided value. NgbModal. Service.
Read more >
Modal backdrop: static not allowing clicks without closing t
Let me explain my problem again: I want the modal to act as a popup which does not close automatically either interrupts the...
Read more >
Bootstrap Modal Dialog showing under Modal Background
On more than a few occasions I've run into issues with Bootstrap's Modal dialog rendering incorrectly with the dialog showing underneath the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Tooltip does not show on condition case

Next page

Alternative Date adapters