Search code examples
angulariframemicrosoft-edgeangular-router

Edge - navigating on Angular iframe sets history.state to null


We have an Angular 7 app that sits inside an iframe on all of our clients websites. All the navigation inside the app is done through this helper class:

import {Injectable} from '@angular/core';
import {Router} from "@angular/router";

@Injectable()
export class NavigationService {

constructor(private router: Router)
{}

    private navigate(path, queryParams = {}){
        this.router.navigate([path], {
            queryParams: queryParams,
            skipLocationChange: true
        }));
    }
}

One of our clients has some JS code (on their main site, not our iframe) that tries to access history.state.persistent *again, on the main window). On Chrome and Firefox everything works fine, but on Microsoft Edge history.state is null.

We're positive that something in our iframe is causing it, as removing the iframe fixes the issue. We also console.logged the history object at set intervals, and we see that at some point during our app initialization the state field becomes null.

Looking through the Angular Router docs I couldn't find anything related, any ideas?

Thanks


Solution

  • I'm not sure what exactly is causing this bug but I think you might want to test some of the ExtraOptions settings on the RouterModule.forRoot().

    interface ExtraOptions {
        useHash?: boolean;
        initialNavigation?: InitialNavigation;
    
    }
    

    https://angular.io/api/router/ExtraOptions