Error when I am trying to implement a modal with ng2-bootstrap

Question

I'm trying to implement a modal with ng2-bootstrap, but I got this error 'Error: ApplicationRef instance not found' and I don't know how can I fix it.

ng2-bootstrap, it said to add some hack, I tried to set it on app.component.ts but it doesn't work.

add-domain.component.html

<!-- Large modal -->
<button class="btn btn-primary" (click)="lgModal.show()">Large    modal</button> 

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

add-domain.component.ts

import { Component, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'add-domain',
    templateUrl: 'add-domain.component.html',
})

export class AddDomainComponent {
  private viewContainerRef: ViewContainerRef;

  public constructor(viewContainerRef: ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef;
      this.title = "Ajouter un domaine"
  }
}

Answer 1

See their hack, you need to add viewContainerRef:

class AppRoot {
  private viewContainerRef: ViewContainerRef;

  public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef;
  }
}

Answer 2

Had same issue. Adding this in my main component fixed it

// Fix to deal with modal error
ComponentsHelper.prototype.getRootViewContainerRef = function () {
    // https://github.com/angular/angular/issues/9293
    if (this.root) {
        return this.root;
    }
    var comps = this.applicationRef.components;
    if (!comps.length) {
        throw new Error("ApplicationRef instance not found");
    }
    try {
        /* one more ugly hack, read issue above for details */
        var rootComponent = this.applicationRef._rootComponents[0];
        //this.root = rootComponent._hostElement.vcRef;
        this.root = rootComponent._component.viewContainerRef;
        return this.root;
    }
    catch (e) {
        throw new Error("ApplicationRef instance not found");
    }
};

@Component({
    selector:       'intro',
    template:       'template.html',
    providers:    [MyDataService]
})

Find details and discussion regarding this issue here ==> https://github.com/valor-software/ng2-bootstrap/issues/986

Answer 3

try the below code. It worked for me. change the backdrop to false.

<div class="modal fade" bsModal #testModal="bs-modal" [config]="{backdrop: false}" ...>