I encountered an issue while trying to incorporate a modal using ng2-bootstrap. The error message displayed was 'Error: ApplicationRef instance not found', and I am unsure of how to resolve it.
After researching, I found that for ng2-bootstrap, you need to apply a workaround. I attempted to implement it in app.component.ts but unfortunately, it did not solve the problem.
https://i.sstatic.net/dFzae.png
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">×</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) {
// A small hack is needed to access the application root view container ref
this.viewContainerRef = viewContainerRef;
this.title = "Ajouter un domaine"
}
}