2017-05-30 187 views
2

我有一個角度2的應用程序,我沒有使用angular-cli來生成它。 我新的角度,我試圖讓我的IE瀏覽器,Safari瀏覽器老等應用工作......Angular 2 non-cli add polyfills.ts

我讀了很多關於polyfills.ts,我怎麼可以添加此到我的角2個應用程序(我使用systemjs加載應用程序)

這裏是我當前所加載的腳本:

<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> 

而且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); 

編輯:我能熔酚醛樹脂已經在「國際」是通過添加腳本未定義:

<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> 

但我想這樣做的正確方法和使用Polyfills.ts

回答

1

看起來你只是做手工。沒有魔法。我剛剛從https://github.com/angular/angular/blob/master/aio/src/polyfills.ts複製了polyfills.ts,並將其包含在我的源代碼文件夾中。我已經取消了對IE的評論,但離開了該區域,並反映了註釋。然後在我的應用我有

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

其中進口的pollyfills.ts文件,這反過來進口核心JS/ES6包。

雖然我正在使用webpack作爲模塊打包器,所以我不確定system.js是如何工作的 - 但主體是相同的,請複製pollyfills文件並像其他模塊一樣導入它。哦,當然在你的package.json你需要

"core-js": "^2.4.1", 

或類似。