Angular2 IE11 Die Eigenschaft 'apply' einer undefinierten oder Nullreferenz kann nicht abgerufen werden

69

Nach dem Upgrade meiner angle2-Pakete auf die folgenden Versionen wird folgende Fehlermeldung angezeigt:

  • @ eckig / gemeinsam ":" ^ 2.3.1
  • @ angle / compiler ":" ^ 2.3.1
  • @ Winkel / Kern ":" ^ 2.3.1
  • @ eckig / Formen ":" ^ 2.3.1
  • @ angle / http ":" ^ 2.3.1
  • @ Angular / Platform-Browser ":" ^ 2.3.1 "
  • @ angle / platform-browser-dynamic ":" ^ 2.3.1
  • @ angle / platform-server ":" ^ 2.3.1
  • @ Angular / Router ":" ^ 3.3.1

Fehler :Unable to get property 'apply' of undefined or null reference

Geben Sie hier die Bildbeschreibung ein

Ich erhalte diesen Fehler nur in IE11, in Chrome funktioniert es gut.

Ich habe ein bisschen gegraben und die Linie, die den Fehler verursacht, befindet sich im Winkel- / gemeinsamen Modul:

function combine(options) {
  return (_a = ((Object))).assign.apply(_a, [{}].concat(options));
  var _a;
}

Die Typoskriptdatei:

@ angle / common / src / pipes / intl.ts Zeile 175

function combine(options: Intl.DateTimeFormatOptions[]): Intl.DateTimeFormatOptions {
  return (<any>Object).assign({}, ...options);
}

Der Code, der die combineFunktion aufruft , lautet @ angle / common / src / pipes / intl.ts Zeile 48:

'yMMMdjms': datePartGetterFactory(combine([


AKTUALISIEREN

Es scheint, dass der eigentliche Fehler darin besteht, dass die .assignMethode nicht in IE11 implementiert ist

Tjaart van der Walt
quelle
1
@ samuel-liew kannst du bitte meine frage überprüfen und schließen. Ich denke, es braucht keine neuen Antworten.
Tjaart van der Walt

Antworten:

99

Wenn Sie @angular/cliIE9-11 verwenden und unterstützen möchten, können Sie die src/polyfills.tsDatei bearbeiten , um entsprechende Polyfills zu aktivieren. Die erforderlichen Polyfills befinden sich bereits in der Datei. Sie müssen sie also nur auskommentieren.

Standardmäßig @angular/clizielen Projekte auf "immergrüne" Browser ab, was bedeutet, dass der IE nicht sofort unterstützt wird. Sie können jedoch Unterstützung hinzufügen, indem Sie Polyfills für die von Ihnen benötigten Funktionen importieren.

Spoida
quelle
4
Dieser Blog-Beitrag scheint diese Antwort zu bestätigen.
Stubbs
@spoida - wie funktioniert die Polyfills-Datei? Wenn ich es auskommentiere, wird es dann nur die Polyfüllung für die alten Browser verwenden und die Standardmethode für immer grüne Browser verwenden? Oder wird ab sofort nur noch Polyfill verwendet?
Diskdrive
@Diskdrive - Normalerweise überprüft die Polyfüllung die Implementierung des Browsers und fügt nur Dinge hinzu, wenn die Implementierung unvollständig ist. Ja, wenn der Browser die Funktion bereits unterstützt, wird die Implementierung der Polyfüllung nicht verwendet.
Spoida
@spoida - danke, aber wenn dies der Fall ist und nur verwendet wird, wenn der Browser es benötigt, warum wird es standardmäßig auskommentiert?
Diskdrive
@Diskdrive - Ich vermute, das liegt daran, dass mit der Überprüfung, ob eine Funktion unterstützt wird, ein geringer Aufwand verbunden ist, anstatt nur davon auszugehen, dass sie implementiert ist, und sie direkt aufzurufen. Wenn Sie also nicht auf den IE abzielen, führt Angular standardmäßig keinen so geringen Overhead ein. Wenn Sie auf den IE abzielen müssen, werden andere unterstützte Browser einen leichten Leistungseinbruch erleiden, aber sie verwenden weiterhin ihre nativen Implementierungen anstelle eines JavaScript-Äquivalents. IE hingegen wird sich auf die JavaScript-Implementierung verlassen, die um Größenordnungen langsamer sein kann als native Implementierungen.
Spoida
28

Angular ist abhängig von Core-Js . Dabei können Sie Object.assign- Polyfills daraus verwenden:

import "core-js/client/shim"; // or load it before other angular2 & zone.js stuff
import "zone.js";
import "reflect-metadata";
Stanislav Berkov
quelle
5
Kumpel, Ihre Antwort würde mehr Stimmen bekommen, wenn Sie erwähnen, dass diese Zeilen in src / polyfills.ts sind. Trotzdem danke, hat mir geholfen, das Problem zu lösen!
VeganHunter
6
VS2017 hat keine Polyfills-Datei, also habe ich den Code in die Boot-App-ts-Datei eingefügt ... hat gut funktioniert ... danke
Davaus
2
In den neuen VS2017 SPA-Vorlagen muss nur die Zeile core-js zu boot.server.ts und boot.browser.ts hinzugefügt werden
Vishal
22

Es ist wirklich ärgerlich, dass das Angular Materials-Tutorial dieses Problem nicht erwähnt. Jeder, der IE11 verwendet und seinem Tutorial folgt, wird auf dieses Problem stoßen.

Wie andere bereits erwähnt haben, besteht die Lösung darin, diese Zeilen in der polyfills.tsDatei Ihres Projekts einfach zu kommentieren .

Geben Sie hier die Bildbeschreibung ein

Aber wirklich, das hätte in ihrem Tutorial erwähnt werden sollen.

Ich verbringe viel zu viele Stunden mit Googeln, um Lösungen für diese Winkelprobleme zu finden ...

Mike Gledhill
quelle
1
Ich stimme dir vollkommen zu. Ich bin neu in Angular 4, obwohl ich vorher mit AngularJs gearbeitet habe, konnte immer noch keine Lösung finden und konnte nicht erraten, was hier schief gelaufen ist. Aber danke, das hat bei mir besser funktioniert als bei dem anderen.
Shilan
21

Laut MDN- Object.assign()Browserkompatibilität wird IE nicht unterstützt.

Sie können die Object.assignPolyfüllung per MDN mit npm importieren . ( MDN-Polyfills )

Lauf: npm i mdn-polyfills --save

Verwenden: import 'mdn-polyfills/Object.assign';

Aldracor
quelle
3
Die andere Antwort, die sich mit core-js befasst, ist die einfachste Antwort, da der Winkel bereits von core-js abhängt und keine weitere Abhängigkeit mit sich bringt.
Andrew Landsverk
@ AndrewLandsverk Ist das neu? Früher hing es von einer Sammlung anderer Polyfills ab. Die meisten eckigen 2 Starter-Kits Core-Js, aber es ist meines Wissens nicht erforderlich.
Aluan Haddad
1
@AluanHaddad Ich glaube nicht, dass es neu ist und ich war mir ziemlich sicher, dass es erforderlich war (wenn nicht direkt, dann als transitive Abhängigkeit des Winkels selbst).
Andrew Landsverk
1
@ AndrewLandsverk danke. Sie sind in der Tat richtig. Es wird direkt als Abhängigkeit aufgeführt.
Aluan Haddad
Ich erhalte den gleichen Fehler in IE und Safari. Ich kommentiere die relevanten Zeilen in polyfill.js aus, danach funktioniert es im IE, aber Safari zeigt immer noch den gleichen Fehler. Bitte schlagen Sie vor, wie Sie dies auf einer Safari beheben können.
Umang Patwa
10

So arbeiten Sie im IE-Browser

Schritt 1: Ausführen:npm i mdn-polyfills --save

Schritt 2: Öffnen polyfills.ts

Schritt 3: Dekommentieren Sie die Importe in der Datei unter / ** IE9, IE10 und IE11 erfordert alle folgenden Polyfüllungen. ** /

Sreenath S.
quelle
2
konnte die
polyfills.ts
6

bei Ihren polyfills.ts hinzufügen:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
Yoav Schniederman
quelle
Vielen Dank! Außerdem ist dieser Satz von Pollyfills den in diesem Beispiel gefundenen sehr ähnlich: github.com/johnpapa/one-with-angular/blob/master/src/…
BBaysinger
Außerdem ist mir gerade aufgefallen, dass das Beispiel, auf das ich verlinkt habe, anscheinend in einer Neuinstallation von Angular-CLI enthalten ist (meine ist 1.0.3). Sie müssen nur die Zeilen auskommentieren.
BBaysinger
Ja. Sie korrigieren. Sie können eine Zeile in der Polyfills-Datei auskommentieren. mit Angular-Cli
Yoav Schniederman
@YoavSchniederman Ich bekomme das gleiche Problem in IEund Safari, ich kommentiere die relevanten Zeilen aus, polyfill.jsnachdem es bearbeitet wurde, IEaber safariimmer noch den gleichen Fehler zeigt. Bitte schlagen Sie vor, wie dies in Safari behoben werden kann.
Umang Patwa
5

Wenn jemand diesen Fehler in einer Dotnet Core 2.0 Angular-Vorlage mit IE erhalten hat, habe ich ihn auf diese Weise behoben.

  1. installiere core-js

    npm installiere core-js --save

  2. Fügen Sie diese Zeile oben in ClientApp / boot.browser.ts hinzu

    'core-js / client / shim' importieren;

Gavin
quelle
4

Wenn Sie Angular 4.x verwenden und auf diesen Fehler stoßen, hat die unter https://github.com/angular/angular-cli/issues/6036 beschriebene Lösung für mich funktioniert.

Es scheint, dass es einen Fehler mit Version 0.8.8 von "zone.js" gibt. Ein Downgrade auf Version 0.8.4 hat das Problem jedoch behoben. Weitere Informationen finden Sie unter dem Link.

Chet
quelle
Keine der anderen Lösungen hat bei mir funktioniert, aber diese hat funktioniert, danke. Aber ich habe Polyfills aktiviert und die Pakete installiert.
Sa_
3

Angular 4 IE11-Fix für Fehler beim Anwenden der Eigenschaft "Übernehmen"

Schritt 1: Öffnen Sie app / boot-browser-ts

Schritt 2: Fügen Sie die folgende Zeile hinzu

import 'core-js/client/shim'; 
Satendra Jindal
quelle
2

Es scheint, dass angle-cli (v1.0.0-rc.0) eine Datei namens polyfills.ts hat, in der Sie alle erforderlichen Polyfills für die Browser auskommentieren müssen. Es funktioniert gut für mich ohne Installation in IE-11.

Santhanam
quelle
Full V1 hat dies mit wertvollen Kommentaren, so dass Sie auch wissen, wie man es benutzt!
Jono Stewart
Ich sehe wirklich nicht, welchen Wert diese Antwort über die Antworten hinaus bietet, die es zum Zeitpunkt der Veröffentlichung bereits gab.
Makyen
1

Stas Berkov hat Recht, und seine Antwort führte mich zu einer etwas anderen Lösung:

In meinem Header, in den ich alle Angular-Skripte lade, habe ich shim.js eingefügt. (Ich bündle / minimiere bei der Bereitstellung). Großer Hinweis: Es ist wichtig, dass shim.js vor zone.js geladen wird, da sonst ein anderer Fehler angezeigt wird.

<script src="/<my domain>/node_modules/core-js/client/shim.js"></script>
<script src="/<my domain>/node_modules/zone.js/dist/zone.js"></script>
<script src="/<my domain>/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/<my domain>/node_modules/systemjs/dist/system.src.js"></script>

<script src="/<my domain>/systemjs.config.js"></script>
Michael
quelle