Angular2: ngOnInit is not called when components is loaded after history.back() in Safari

Question

I am using angular2 plain js

The problem is that ngOnInit() is not called after component is loaded after history.back() . Everything is working ok with my components when I just navigate from one component to another using routeLink .

My component looks like this:

Page1Component = ng.core
    .Component({
        selector: 'page1',
        templateUrl: 'app/components/page1/view.html',
        directives: [ ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
        constructor: [
            ng.router.Router,
            function(router) {
                console.log("constructor called"); // <- this is called in all cases.
            }
        ],
        ngOnInit: function(){
            console.log("ngOnInit"); // <-- This is NOT called when coming from history.back(), but it's working ok in other cases.
        },
        ngAfterContentInit: function(){
            console.log("called ngAfterContentInit"); // <-- Same as ngOnInit
        }
    });

From this component I go to other component using Router like this: [routerLink]="['Page2']" and from Page2 when I call history.back() ngOnInit and ngAfterContentInit from Page1 are not called.

The problem is only on Safari iOS

In my index.html I include:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
<script type="text/javascript" src="libs/es6-shim/es6-shim.min.js"></script>
<script type="text/javascript" src="libs/es6-shim/shims_for_IE.js"></script>
<script type="text/javascript" src="libs/angular/2.0.0-beta.13/angular2-polyfills.min.js"></script>
<script type="text/javascript" src="libs/angular/2.0.0-beta.13/Rx.umd.min.js"></script>
<script type="text/javascript" src="libs/angular/2.0.0-beta.13/angular2-all.umd.js"></script>

Answer 1

That's a known issue

• https://github.com/angular/angular/issues/7722
• https://github.com/angular/angular/issues/4809

Some things to check

one thing that jumps out to me in looking at your demo is that you have the OnPush ChangeDetectionStrategy on your demo.ts component. This strategy is usually used with Observables or changes in input that informs Angular that change detection needs to be run. Remove the OnPush from your demo.ts component and test your pagination route again.

are you including the angular2 polyfills in your index.html with a tag? If you can share your index.html that would help also.