Angular 8 个 web worker 在 IE 中被破坏

Question

从 Angular 7 迁移到 8，发现我们设置为运行后台任务的网络工作者在 IE 11 中运行时不再执行（大概较早）。 Edge，Chrome，所有其他的都很好，只有 IE 11。

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

Answer 1

Angular 8 摒弃了传统的 polyfill 技术以兼容 ES6+ 和 ES5，使用差异构建来分离 ES5 和 ES6+ 脚本。这在主要的应用程序组件中运行良好，但是网络工作者运行他们在自己的线程中进行自己的进程并且不再有权访问 polyfillers。

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

对于我们的 web worker，这意味着删除任何箭头函数 (=>) 并将它们替换为传统的函数声明和具有老式连接的字符串插值。

// 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 中成功加载。）

Answer 2

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

有两种方法可以在服务期间使用 ES5 代码使 angular 8 应用程序在 IE11 中工作。

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

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

在 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'.

Angular 8 个 web worker 在 IE 中被破坏

Angular 8 web workers are broken in IE

angular

internet-explorer

angular8

web-worker

ecmascript-5