title: ngx-bootstrap , Component Modal, The selector "modal-content" did not match any elements
body: <p>I have <code>Angular 7</code>  <code>"ngx-bootstrap": "^3.1.4"</code> and <code>"bootstrap": "^4.3.1"</code> </p>
  
  <p>Are these compatible at all?</p>
  
  <p>I trying to open component in modal as this question: <a href="https://stackoverflow.com/questions/46698126/ngx-bootstrap-how-to-open-a-modal-from-another-component">ngx-bootstrap How to open a modal from another component?</a></p>
  
  <p>However I'm getting this error: </p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DialogBoxComponent -> BsModalRef]: 
      StaticInjectorError(Platform: core)[DialogBoxComponent -> BsModalRef]: 
        NullInjectorError: No provider for BsModalRef!
    Error: StaticInjectorError(AppModule)[DialogBoxComponent -> BsModalRef]:</p>
  </blockquote>
  
  <p>I have imported ngx in my module as:</p>
  
  <pre><code>        import { BrowserModule } from "@angular/platform-browser";
      import { NgModule } from "@angular/core";
      import { HttpClientModule } from "@angular/common/http";
  
      import { AppComponent } from "./app.component";
      import { AppHeaderComponent } from './app-header/app-header.component';
      import { AppFooterComponent } from './app-footer/app-footer.component';
      import { AppRoutingModule } from './app-routing.module';
      import { PoliciesComponent } from './policies/policies.component';
      import { AddComponent } from './add/add.component';
      import { ReactiveFormsModule } from '@angular/forms';
      import { ModalModule } from 'ngx-bootstrap';
      import { ModalContentComponent } from './modal-content/modal-content.component';
  
  
      @NgModule({
        declarations: [AppComponent, AppHeaderComponent, AppFooterComponent, PoliciesComponent, AddComponent, ModalContentComponent],
        imports: [
          ModalModule.forRoot(),
          HttpClientModule,
          BrowserModule,
          AppRoutingModule,
          ReactiveFormsModule
  
        ],
        providers: [],
        bootstrap: [AppComponent, ModalContentComponent]
      })
      export class AppModule { }
  
  
  
      import { Component } from '@angular/core';
      import { BsModalRef } from 'ngx-bootstrap/modal';
  
      @Component({
        selector: 'modal-content',
        templateUrl: './modal-content.component.html',
      })
  
      export class ModalContentComponent {
        title: string;
        closeBtnName: string;
        list: any[] = [];
  
        constructor(public bsModalRef: BsModalRef) { }
  
        ngOnInit() {
          this.list.push('PROFIT!!!');
        }
      }
  
  import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
  import { PoliciesService } from './policies.service';
  import { Policy } from 'src/models/policy';
  import { Gender } from 'src/models/gender';
  import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
  import { ModalContentComponent } from '../modal-content/modal-content.component';
  
  @Component({
    selector: 'app-policies',
    templateUrl: './policies.component.html',
    styleUrls: ['./policies.component.scss']
  })
  export class PoliciesComponent implements OnInit {
    gender = Gender;
    policies: Policy[];
    bsModalRef: BsModalRef;
  
    constructor(private policiesService: PoliciesService, private modalService: BsModalService) { }
  
    ngOnInit() {
      this.policiesService
        .getAll()
        .subscribe(p =&gt; this.policies = p);
    }
  
    deleteClicked(id: number) {
      this.policiesService
        .delete(id)
        .subscribe(() =&gt; this.deleteFrom(this.policies, id));
    }
  
    private deleteFrom(arr: Policy[], id: number) {
      arr.splice(arr.findIndex((p: Policy) =&gt; p.policyNumber === id), 1);
    }
  
    openModalWithComponent() {
      const initialState = {
        list: [
          'Open a modal with component',
          'Pass your data',
          'Do something else',
          '...'
        ],
        title: 'Modal with component'
      };
      this.bsModalRef = this.modalService.show(ModalContentComponent, { initialState });
      this.bsModalRef.content.closeBtnName = 'Close';
    }
  }
  </code></pre>