Angular 2 Routed apps hosted in iframes

Viewed 3273

I am currently working on an Outlook add-in that I am building with Angular 2. Because it's an outlook hosted app, it will be run in a cross domain iframe and there is nothing that I can change about this. The iframe is also sandboxed with the following properties allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups.

I am trying to use Angular 2's router, but whenever I use the navigate method, I get a series of exceptions stating this._history.pushState is not a function. I tried both the default location strategy as well as the hash location strategy and get this exception with both. I thought the purpose of HashLocationStrategy was to support older browsers that don't fully support HTML 5. It seems like that defeats the purpose with using the HTML 5 history methods such as pushState, but I may be wrong in my understanding of the differences between LocationStrategy and HashLocationStrategy

My question is, is there a way to tell the router not to use history.pushState or anything else that can be done so that I can use the router in this iframe. Because I am getting these exceptions, it is stopping some of my application startup code from executing.

EDIT: As a side note, my application has multiple pages, so it is definitely not a strict SPA. I was trying to keep the entire UI as a static site and using the router to navigate between the pages. I don't necessarily care about preserving navigation history since it is hosted in outlook, so maybe the angular router doesn't fit my use case. I am also researching the idea of using something like ASP.NET MVC for the entire app, but using angular to power each section/page of the application.

3 Answers
Related