ngx bootstrap modal not injecting properly

Question

I'm trying to use this 'BsModalService' to open a modal, but I'm getting the following error.

compiler.js:485 Uncaught Error: Can't resolve all parameters for AppComponent: (?, [object Object], [object Object]).

Here is My component.

import { Component, ViewChild, HostListener, OnInit, Inject, ElementRef, TemplateRef } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { WINDOW } from "../providers/window.service";

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'app';
  isCollapsed: boolean;
  magicHeight: number;
  invertNavBar: boolean = false;
  modalRef: BsModalRef;
  @ViewChild('navBar') navBarElementView: ElementRef;
  @ViewChild('funcionalidades') funcionalidadeselementView: ElementRef;

  constructor(
    private modalService: BsModalService,
    @Inject(DOCUMENT) private document: Document,
    @Inject(WINDOW) private window

  ) {

  }
}

And here my module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ModalPrincipalComponent} from '../components/modal_principal/modal_principal.component';

import { AppComponent } from './app.component';
import { WINDOW_PROVIDERS } from "../providers/window.service";

@NgModule({
  declarations: [
    AppComponent,
    ModalPrincipalComponent
  ],
  imports: [
    BrowserModule,
    ModalModule.forRoot(),
    CollapseModule.forRoot(),
    CarouselModule.forRoot()
  ],
  providers: [WINDOW_PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule { }

An interesting thing about this, is that if I add modalService as the last parameter in my constructor, I don't get this error, but the service still isn't injected, the variable value become undefined.

The library in general is working, I'm using carousel and collapse modules without any problem.

I've already tried to delete the node_modules folder and reinstall it, but didn't solve the problem.

score 0 · Answer 1 · answered Feb 16 '18 at 12:32

0

You need to import NgbModule and add it to imports

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

answered Feb 16 '18 at 12:32

Sajeetharan

216,225
63
350
396

Thanks for the answer, but still not working, I tried to use NgbModule.forRoot() and NgbModule in the imports array, but i'm still gettit the error. – Juliano Grams Feb 16 '18 at 12:40
No, still have no idea what is happening. – Juliano Grams Feb 16 '18 at 16:30
Well, actually, this time I tried to import the Router service, and i've got the same error, probably the problem is more complex. – Juliano Grams Feb 16 '18 at 16:55
lets discuss on chat – Sajeetharan Feb 16 '18 at 16:58
TS uses BsModalService so, no need to import NgbModule and ng-boostrap at all, BsModalService is from ngx-bootstrap – Andrey Nov 27 '18 at 16:11

score 0 · Answer 2 · answered Nov 27 '18 at 16:13

0

try to add the static field into your AppComponent as follows

export class AppComponent {
...
static parameters = [BsModalService];

constructor(private modalService: BsModalService)

answered Nov 27 '18 at 16:13

Andrey

1,752
18
17

score 0 · Answer 3 · answered Jan 16 '19 at 05:53

instead of

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

you can write directly

 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

the thing to solve this you need to do is in your app.module.ts

import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';

     imports: [
        ModalModule.forRoot()
   ],
     providers: [
        BsModalRef
   ],

I hope this will Help You.

Because it worked for me.

ngx bootstrap modal not injecting properly

3 Answers3