2017-05-30 61 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", 

或类似。