Angular 7 + ngx-bootstrap 3.1.3

Question

Here is a blank angular 7 project in stackblitz, in Angular 6 I used constructor(private bsModalRef: BsModalRef) so I can pass values to my child popup component.

But when I update to angular 7, it said Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service'.

In stackblitz, it asked me to install ngx-bootstrap but I already installed.

Any idea?

Yes. import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';. — Kunyuan Xiao
– Kunyuan Xiao, Commented Nov 9, 2018 at 17:29
You're injecting BsModalRef while you should be injecting BsModalService. Check my answer for more details. — SiddAjmera
– SiddAjmera, Commented Nov 9, 2018 at 17:49

Abhishek Ekaanth · Accepted Answer · 2018-11-09 17:50:19Z

12

First thing is you need to change your import in app.component.ts from

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

to

import { BsModalRef } from 'ngx-bootstrap';

then you will have to provide providers in app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports:      [ BrowserModule, FormsModule,ModalModule.forRoot(),
  BsDropdownModule.forRoot() ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BsModalRef]
})
export class AppModule { }

working STACKBLITZ

edited Nov 9, 2018 at 17:50

answered Nov 9, 2018 at 17:45

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kunyuan Xiao Over a year ago

It works but why the doc said from 'ngx-bootstrap/modal/bs-modal-ref.service'; and no probiders.

Abhishek Ekaanth Over a year ago

When ever you're using a service you need to provide them in provider otherwise angular won't be able to understand that it's a service

Shilpa Soni · Accepted Answer · 2019-04-24 13:45:19Z

1

Please

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

and inject the BsModalService as a dependency.

answered Apr 24, 2019 at 13:45

Shilpa Soni

3063 silver badges7 bronze badges

Comments

SiddAjmera · Accepted Answer · 2018-11-09 17:41:37Z

0

According to the docs here, you'll need to inject the BsModalService as a dependency. But you're injecting BsModalRef.

Here's the correct syntax:

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
...
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}

Here's a Working StackBlitz Example for your ref.

answered Nov 9, 2018 at 17:41

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

Angular 7 + ngx-bootstrap 3.1.3

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related