Angular 8 网络工作者在 IE 中被破坏答案

【问题标题】：Angular 8 web workers are broken in IEAngular 8 网络工作者在 IE 中被破坏
【发布时间】：2020-01-29 21:02:19
【问题描述】：

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

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

【问题讨论】：

标签： angular internet-explorer angular8 web-worker ecmascript-5

【解决方案1】：

Angular 8 摒弃了传统的 polyfill 技术，以便与 ES6+ 和 ES5 兼容，使用差异构建来分隔 ES5 和 ES6+ 脚本。这在主应用程序组件中运行良好，但 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-worker 中成功导入和加载。）

【讨论】：

【解决方案2】：

默认情况下，在 Angular 版本 8 中，ng build 的差异加载已启用。但是对于 ng test 和 ng serve，它只会生成一个无法在 IE11 中运行的 ES2015 构建。

在服务期间有两种方法可以让 ES5 代码在 IE11 中运行 Angular 8 应用程序。

完全禁用差分加载。（不推荐）

您可以通过在 tsconfig.json 中将目标从“es2015”更改为“es5”来关闭差异加载。
有多种服务配置。

在 tsconfig.app.json 旁边创建一个新的 tsconfig tsconfig-es5.app.json，内容如下：

{ 
 "extends": "./tsconfig.app.json",
 "compilerOptions": { 
 "target": "es5"   
  }
}

在您的 angular.json 中，在 build 和 serve 目标下添加两个新的配置部分（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

另外，browserslist文件内容如下：

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

【讨论】：

这并没有真正解决专门针对网络工作者的问题，而不是关于如何通过 ng serve 提供内容的问题。