Angular2 Safari Back Button

Question

In the actual Angular2 beta 14 (and before) there seems to be an issue with the back button (when using routing, and several views) on Safari (actually using 9.1): https://github.com/angular/angular/issues/7722

I also experienced this problem, while this works fine e.g. on Chrome.

I'm looking for a workaround until the issue is fixed?

Answer 1

On "angular2": "2.0.0-beta.14"

I had to run the tick inside a zone to get it to work for me.

import {ApplicationRef, <anything else you need>} from 'angular2/core';
import {Router,<anything else you need>} from 'angular2/router';

export class AppComponent {
    constructor(private _ref: ApplicationRef, private _router: Router) {
        _router.subscribe((value) => {
            _ref.zone.run(() => _ref.tick());
        });
    }
}

Answer 2

There is partial workaround for this bug:

1. Inject Router and ApplicationRef into Application component
2. Subscribe for router changes and trigger full component tree check:

    router.subscribe((value)=>
    {
        //todo: check browser UA or any other parameters to detect back button, i.e. if (safari) {}

        //trigger change that will invoke init methods
        appRef.tick();
    });

Answer 3

angular2 - 2.15.8

constructor(private _ref: ApplicationRef, private _router: Router) {
        _router.events.subscribe((value) => {
            _ref.zone.run(() => _ref.tick());
        });
    }

Using _router.subscribe is deprecated and will throw Undefined function .subscribe() on _router.