Angular 2 nicht-cli add polyfills.ts

Question

Ich habe eine angular 2 app, ich habe nicht angular-cli verwendet, um es zu generieren. Ich bin neu in Angular und ich versuche, meine App arbeiten mit IE, alte Safari, etc ...

Ich lese viel über die polyfills.ts, wie kann ich das zu meiner angular 2 app hinzufügen (ich systemjs mit der app)

Hier laden ist die Skripte ich gerade geladen:

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

Und die systemjs.config:

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': '/node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: '/js/angular/eventticketspage', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

     // other libraries 
     'rxjs': 'npm:rxjs', 
     'core-js': 'npm:core-js' 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
      main: './main.js', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     }, 
     'core-js': { 
      defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

Edit: ich bin in der Lage zu Resol ve des ‚intl‘ durch Hinzufügen des Skripts nicht definiert ist:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 

<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script> 

Aber ich will es den richtigen Weg zu tun und mit Polyfills.ts

Answer 1

Es sieht aus wie Sie es einfach tun, manuell. Es gibt keine Magie. Ich habe gerade die polypills.ts von https://github.com/angular/angular/blob/master/aio/src/polyfills.ts kopiert und in meinem Quellcode-Ordner enthalten. Ich habe die Zeilen für IE nicht kommentiert, aber die Zone verlassen und die Zeilen kommentiert. Dann in meiner app habe ich

import "../shared/pollyfills" // I have put pollyfills.ts in a shared folder 
import "zone.js"; 
import "reflect-metadata"; 

die die pollyfills.ts Datei importiert, was wiederum die Kern-js/es6 Pakete importiert.

Ich benutze Webpack als Modul Bundler obwohl, ich bin mir nicht sicher, wie system.js funktioniert - aber der Auftraggeber ist der gleiche, kopieren Sie die Pollyfills-Datei über und importieren Sie es wie jedes andere Modul. Oh, und natürlich in deinem Paket.json brauchst du

"core-js": "^2.4.1", 

oder ähnlich.