在IE中损坏了8位网络工作者

Question

从Angular 7迁移到8，发现我们设置为运行后台任务的Web-worker在IE 11中运行时（可能更早）不再执行。 Edge，Chrome，其他所有功能都很好，仅IE 11。

Devtools抱怨语法错误，并引用了es-2015.js文件。

Answer 1

Angular 8取消了传统的polyfill技术，以使用差异化构建将ES5和ES6 +脚本分开来与ES6 +和ES5兼容。在主要的应用程序组件中，这可以正常工作，但是Web工作者在自己的线程中运行自己的进程，并且不再有权使用polyfiller。

最终，该解决方案比我想象的要简单得多。确保Web Worker中的代码符合ES5，并且将在IE中运行。

对于我们的网络工作者，这意味着删除任何箭头函数（=>），并用传统的函数声明和带有老式串联的字符串插值代替。

// instead of 
myClass.doSomething( myVar => { console.log(`Look what I have in ${myVar}` } );

// do it old school
myClass.doSomething( function (myVar) { console.log('Look what I have in ' + myVar } );

（（还有其他一些文章建议手动放入polyfill（here），但我无法完全将polyfill导入并成功加载到Web工作者中。]

Answer 2

默认情况下在angular版本8中，启用了ng生成的差分加载。但是，对于ng test和ng serve，它仅生成单个ES2015构建，无法在IE11中运行。

有两种在服务期间使用ES5代码的方法，这些代码使IE11中的angular 8应用能够正常工作。

1. 完全禁用差分负载。 （不推荐）

   您可以通过在tsconfig.json中将目标从“ es2015”更改为“ es5”来关闭差异加载。]

2. 具有多种服务配置。

使用以下内容在tsconfig.app.json旁边创建一个新的tsconfig tsconfig-es5.app.json：

{ 
 "extends": "./tsconfig.app.json",
 "compilerOptions": { 
 "target": "es5"   
  }
}
在您的angular.json中，在构建下添加两个新的配置部分（es5节点），并作为目标提供新的tsconfig。

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        ...
},
"configurations": {
"production": {
    ...
},
"es5": {
    "tsConfig": "./tsconfig-es5.app.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
    ...
},
"configurations": {
"production": {
...
},
"es5": {
    "browserTarget": "<your application name>:build:es5"
}
}
},
然后您可以使用以下命令使用此配置运行服务：

ng serve --configuration es5
此外，浏览器列出的文件内容如下：

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.