Angular 6 Error handling - how to display error in modal?

Question

I'm trying to display errors in a modal dialog but I'm a total Angular newbie and I'm stuck.

The project already uses bootstrap so I've tried using NgbModal:

    // in ErrorHandler

    handleError(error: Error) {
    
    //do other stuff

    console.error(error);
    
    this.modalService.open(ErrorDisplayComponent, //problems here
          {
          //modal options
          });
    }

This causes an error:

Uncaught TypeError: Cannot read property 'open' of undefined
at NgbModal.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModal.open

It seems like the open method is not happy with the ErrorDisplayComponent parameter.

Even if that worked, I don't know how to pass the error variable to ErrorDisplayComponent (but I'll deal with that if I get this to work).

According to the documentation (https://ng-bootstrap.github.io/#/components/modal/api) "Content [for the open() method] can be provided as a TemplateRef or a component type."

Perhaps I should try with the TemplateRef option (but I have no idea how to create a TemplateRef on the fly) or perhaps this approach is wrong and I should be doing something else. But since I don't even know the lingo, googling for an answer is not that easy.

Any ideas?

Thanks in advance!

UPDATE: Complete code

ErrorsHandler.ts

    import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error-display.component';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

    constructor(private modalService: NgbModal) {

    }

    handleError(error: Error) {
        //console.error(error);
        this.modalService.open(ErrorDisplayComponent, 
    { ariaLabelledBy: 'modal-basic-title', centered: true, size: 'lg', 
    windowClass : "newUserModalClass" });
    }
}

error-display.component.ts

    import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-error-display',
  templateUrl: './error-display.component.html',
  styleUrls: ['./error-display.component.scss']
})
export class ErrorDisplayComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) {
  }

  ngOnInit() {
  }

  onClose():void {
    this.activeModal.close('closed');
  }
  
  

      onDismiss(reason : String):void {
        this.activeModal.dismiss(reason);
      }
    }

error-display.component.html

<ng-template #content let-modal>
  <h1>error-display works!</h1>
</ng-template>

Answer 1

I had this problem few days ago, I found a solution, so in case somebody runs into this problem, what you could do to try to solve it is to inject modalService: NgbModal at run time in stead of using the constructor. In this specific case, the injection can be implemented in the next way:

import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error- 
display.component';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

    private modalService: NgbModal

    constructor(private injector: Injector) {

    }

    handleError(error: Error) {
        this.modalService = this.injector.get(NgbModal);

        //console.error(error);
        this.modalService.open(ErrorDisplayComponent, 
       ...

In my case I was calling modalService from another service but I had the same error, it seems that the _modalStack: NgbModalStack property from NgbModal was getting undefined value, so when I injected at run time the service was defined.

I hope this can help somebody running into this problem.

You can read next documentation to understand better NgbModal functionallity and class composition for NgbModal

https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal.ts

https://ng-bootstrap.github.io/#/components/modal/examples

Kind regards,