Angular 2 Out of stackspace im Internet Explorer

Vor kurzem wurden wir um Hilfe gebeten da eine in Angular 2 entwickelte Anwendung im Internet Explorer nicht korrekt geladen wurde. Diese wurde innerhalb des Modern Page Layout von SharePoint gehosted. Der Fehler der innerhalb der Entwicklerkonsole zu sehen war lautete „Out of stack space“ innerhalb der SharePoint Datei „sp-loader-assembly_de-de.js“.

Fehleranalyse

Da die Fehlermeldung leider wenig aussagekräftig war und auch nicht den korrekten Ursprung des Fehlers zeigte mussten wir den Fehler zu Beginn näher analyisieren. Dieser Fehler trat nur im Internet Explorer auf, deshalb hatten wir schnell die Angular Polyfills im Auge. Nach weiteren Tests konnten wir den Fehler auf die Polyfills für Map und Set eingrenzen. Wurden diese nicht mehr geladen startet zwar die Angular Anwendung nicht, es trat jedoch auch kein Out of stack space Fehler auf.

Nachdem wir dies schonmal herausgefunden haben suchten wir den Fehler weiter in dieser Richtung. Dabei fiel auf das der SharePoint selbst Polyfills für Map und Set lädt. Das Problem an diesen Polyfills ist jedoch das diese nicht korrekt mit Angular 2 zusammen arbeiten. Da diese in der Datei „sp-loader-assembly_de-de.js“ gesetzt werden zeigt der Fehler in der Konsole auch diese Datei an wenn Angular versucht mit diesen Polyfills zu arbeiten.

Workaround

Nachdem wir die Ursache des Fehlers gefunden hatten galt es einen Workaround zu implementieren. Dabei konnten wir eine einfache Lösung finden indem wir die SharePoint Polyfills rechtzeitig zurücksetzen damit die Angular Polyfills genutzt werden.

Hierfür haben wir in der Seite folgende Prüfung eingebaut bevor die Polyfills von Angular geladen wurden:

// Check for native support of Map vs Polyfill, this is required to prevent stack overflow
if(Map.toString().indexOf('function Map()') === -1)
{
    Map = undefined;
}

if(Set.toString().indexOf('function Set()') === -1)
{
    Set = undefined;
}

// Load angular polyfills and app

Hier wird geprüft ob es sich bei Map und Set um einen SharePoint Polyfill handelt. Unterstützt der Browser Map und Set liefert ein Aufruf von .toString()  den Wert „function Set() { [native code] }“. In diesem Fall müssen wir keine Anpassungen an den Polyfills vornehmen. Ist ein Polyfill geladen werden die Argumente mit aufgelistet und die Prüfung setzt Map und Set auf undefined zurück. Anschließend werden die Polyfills geladen und da Map und Set nun undefined sind wird das Polyfill von Angular genutzt.

Nach dieser Änderung lief die Angular Anwendung ohne Probleme auch im Internet Explorer.

Haben Sie Fragen zu diesem Artikel oder brauchen Sie Unterstützung?

Nehmen Sie mit uns Kontakt auf!

Wir unterstützen Sie gerne bei Ihren SharePoint-Vorhaben!