title: Cannot read property 'backdrop' of undefined
body: <p>This is code I'm using in my HTML page. In my angular module I import every relevant things. But always says this error because of backdrop. Please help. I have no idea about this backdrop.If some can explain please what is this error and why it comes ?</p>
  
  <pre><code>&lt;div class="animated fadeIn"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
            &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                &lt;i class="fa fa-align-justify"&gt;&lt;/i&gt; Bootstrap Modals
              &lt;/div&gt;
              &lt;div class="card-block"&gt;
                &lt;!-- Button trigger modal --&gt;
                &lt;button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()"&gt;
          Launch small modal
        &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--/.col--&gt;
        &lt;/div&gt;
        &lt;!--/.row--&gt;
      &lt;/div&gt;
  
      &lt;div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog modal-sm" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
              &lt;button type="button" class="close" (click)="smallModal.hide()" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-secondary" (click)="smallModal.hide()"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.modal-content --&gt;
        &lt;/div&gt;
        &lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;
      &lt;!-- /.modal --&gt;
  </code></pre>
  
  <p><strong>This is my .ts file</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';
  
  @Component({
    selector: 'app-mso-user-profile',
    templateUrl: './mso-user-profile.component.html',
    styleUrls: ['./mso-user-profile.component.css']
  })
  export class MsoUserProfileComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>