Was wird benötigt, um Winkel 2 in IE9?

Ich habe versucht, erstellen Sie eine Eckige 2-Anwendung (mit der get-started-Handbuch) als Vorlage, aber bis es wirklich funktioniert gut in Chrome, die ich bin kämpfen, um es Arbeit im IE9!

Grundsätzlich ist die app scheitert beim laden/ausführen boot/js mit folgendem Fehler an den Entwickler-Konsole..

LOG: Fehler: Objekt unterstützt diese Aktion

Hat jemand irgendwelche Empfehlungen oder Vorschläge, die - noch besser - eine demo, die tatsächlich funktioniert im IE9?

Beginn meiner index.html sieht wie folgt aus...

<head>
<title ng-bind="title">xxx</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">

<link  href="/css/bootstrap.min.css" />
<link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link  href="/css/style.css" />
<link  href="/css/main.css" />

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-sham.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-sham.min.js"></script>
<script src="/app/shims_for_IE.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>

<script>
    System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, function(err){
            console.log(err);
        });
</script>

Mit den Eckigen folgenden code https://angular.io/guide/quickstart auf den Brief!

Update 1:
Mit ein bisschen mehr testen (meist in neueren IE-Browser) ich bin experiancing das gleiche Problem, aber sehen Sie mehr details..

    TypeError: Object doesn't support property or method 'keys'
   at Anonymous function (http://localhost:5000/app/angular2.dev.js:783:5)
   at Anonymous function (http://localhost:5000/app/angular2.dev.js:781:3)
   at linkDynamicModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3130:5)
   at getModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3098:9)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3134:9)
   at Anonymous function (http://localhost:5000/app/angular2.dev.js:10795:3)
   at linkDynamicModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3130:5)
   at getModule (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3098:9)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js:3134:9)
   at Anonymous function (http://localhost:5000/app/angular2.dev.js:12011:3)

Den index.html aktuell aussieht..

<head>
<title ng-bind="title">xxx</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">

<link  href="/css/bootstrap.min.css" />
<link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link  href="/css/style.css" />
<link  href="/css/main.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-sham.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-sham.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>

<script src="https://code.angularjs.org/tools/typescript.js"></script>

<script src="/app/reflect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.src.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<!--<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>-->
<script src="/app/angular2.dev.js"></script>



<script src="/app/shims_for_IE.js"></script>


<script>
    System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(function(){
        }, function(err){
            console.log(err.stack);
        });
</script>

Sind Sie sicher, dass Sie tatsächlich läuft der browser immer im IE9 Modus?
Gut.... Ich bin mit dem browser-stack 🙂
Haben Sie verfolgt den Fehler auf einen bestimmten Teil des Codes, können getestet werden?
Hit F12 und überprüfen Sie, ob der IE läuft im IE9 oder emulation-Modus
Es ist ein fairer Kommentar.. aber Jo öffentlichkeit kümmert sich nicht darum, ob Ihr browser geeignet ist oder nicht! Nur, dass die app, die Sie verwenden möchten, funktioniert

InformationsquelleAutor andycwk | 2016-01-13

angular internet-explorer-9

5

Fix für Angular2 RC4 IE9:
- Skript:
<script src="https://npmcdn.com/[email protected]/es6/dev/src/testing/shims_for_IE.js"></script>
- Ändern routing-Methode auf '#'
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; ... bootstrap(AppComponent, [ ..., { provide: LocationStrategy, useClass: HashLocationStrategy } ]);
- Verwenden Sie nicht die browser-history zu navigieren:
window.history.back(); //BAD

schön 🙂 ich werde give it a shot, wenn ich einen moment später in der Woche 🙂

InformationsquelleAutor mokula
2

So, nach mehreren Stunden an den Haaren ziehen, ein Gespräch hier mit @kevinB (danke) und schließlich heben Sie ein ticket https://github.com/angular/angular/issues/6479#issuecomment-171582759

es stellt sich heraus, es war menschlicher Fehler!!

Hatte ich copy/Paste den falschen links vom cloudflare CDN Website, verweisen auf es6-sheinem.js anstelle von es6-shichm.js

Einem so kleinen Tippfehler - aber mit massiven Folgen!

InformationsquelleAutor andycwk
0

Fügen Sie diese Zeilen code, kurz nach Ihrem <head> im index.html

Hinweis: die Reihenfolge muss gleich sein

<script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

InformationsquelleAutor Thyagu
0

Ich bin mit Winkel-2.4.0 und war in der Lage, um es arbeiten mit dem IE9, mit dem folgenden pollyfills:
```
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
```
Ich hatte erwartet, dass die core-js-shim zu bieten vollständigen support für IE9 auch, aber es war immer noch fehlen einige Funktionen. Hinzufügen shims_for_IE schien gut zu funktionieren.

Bezug auf routing im IE9, die folgende Antwort war hilfreich:
Wie bootstrap mit HashLocationStrategy im Winkel 2 RC5

InformationsquelleAutor happymeal
0

Können Sie mit dem node package ie-shim, installieren Sie Sie auf der Kommandozeile mit npm install ie-shim --save

Vielleicht Referenz in Ihrer ployfills.ts zu importieren Bibliothek bauen:
```
import 'ie-shim';
```
Wahrscheinlich eine gute Idee, um es vor zone.js import.

InformationsquelleAutor Zymotik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.