4

Angular 4 application.

I am trying to make an error page in order to show some information about the unhandled exception that may occur. The GlobalErrorHandler intercepts eventual errors and redirects the user to a page consisting of a single ErrorComponent. When the error occurs the page is shown, but life cycle hooks do not get called.

ErrorHandler :

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {

    constructor(
        private injector: Injector
    ) {
        // The true paramter tells Angular to rethrow exceptions, so operations like 'bootstrap' will result in an error
        // when an error happens. If we do not rethrow, bootstrap will always succeed.
        super(true);
    }

    handleError(error: any) {
        const router = this.injector.get(Router);

        if (!router.url.startsWith('/error')) {
            router.navigate(['/error']);
        }

        super.handleError(error); 
    }

}

ErrorComponent :

@Component({
    selector: 'error-desc',
    template: '<h1>Error page = {{code}}</h1>'
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ErrorComponent implements OnInit {
    public code: string = '';

    constructor(
    ) {}

    ngOnInit() {
        // not called
        this.code="AAAA";
        console.log("OnInit");
    }

    ngOnDestroy() {
        console.log("OnDestroy");
    }
}

Working demo on plunkr.

How I can fix this? Maybe someone knows workaround? Thanks

n00dl3
  • 21,213
  • 7
  • 66
  • 76
Albert
  • 201
  • 1
  • 7
  • 2
    put Your code please – Salim Ibrohimi Sep 18 '17 at 13:01
  • The code is in planker. See the link in description – Albert Sep 19 '17 at 05:26
  • @Albert I experience the same problem after upgrading from 4.1 to 4.4. BTW You should include the code inside your question, not an external website, see [How to ask a good question](https://stackoverflow.com/help/how-to-ask) : "*If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/) then do so - but also include the code in your question itself. Not everyone can access external sites, and the links may break over time.*" – n00dl3 Sep 20 '17 at 12:12
  • There is an [issue](https://github.com/angular/angular/issues/15946) about that concern. – n00dl3 Sep 20 '17 at 13:19
  • @n00dl3, you are right, it is my oversight about code in question. I will be more attentive in the future. Thanks – Albert Sep 20 '17 at 17:54

1 Answers1

6

After finding this github issue. It seems you just have to run your router.navigate(...) code inside angular's zone to get the redirection up and running :

ErrorHandler :

@Injectable()
export class GlobalErrorHandler extends ErrorHandler {

    constructor(private injector: Injector private zone: NgZone) {
        super();
    }

    handleError(error: any) {
        const router = this.injector.get(Router);
        super.handleError(error);
        if (!router.url.startsWith('/error')) {
            this.zone.run(()=>router.navigate(['/error']));
        }
    }

}
n00dl3
  • 21,213
  • 7
  • 66
  • 76
  • Interesting, `handleError` method run outside `zone` – Pankaj Parkar Sep 21 '17 at 15:13
  • I had same issue receiving a payment from `PayPal Checkout` and redirecting the user to a success page... anyway, running the `router` inside angular's `NgZone` fixed my issue... Thanks! – caiovisk Jun 06 '18 at 07:30