angularngx-bootstrapangular7ngx-bootstrap-modal

Angular 7 + ngx-bootstrap 3.1.3


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?


Solution

  • 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