如何正确地将 Polyfills 添加到 SystemJS Angular 4 应用程序

Posted 2023-03-10

【中文标题】如何正确地将 Polyfills 添加到 SystemJS Angular 4 应用程序

【英文标题】：How to correctly add Polyfills to SystemJS Angular 4 application

【发布时间】：2018-02-28 09:00:53

【问题描述】：

我在开发模式下使用 SystemJS，在生产环境中使用 AOT（这不是最好的方法，但我们在一年前开始使用该应用程序）。当我们刚刚在 Chrome/Edge 上进行测试时，一切都很顺利，直到我们在 IE/Firefox/Safari 上检查了该站点并发现它全部损坏了。在这些浏览器中检查时没有显示任何内容。

我搜索了一下，发现它可能需要一些 polyfills 来支持不同的浏览器。在我的 SystemJS 开发环境中，我有

<!-- Polyfill(s) for older browsers -->
<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>
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) 
    console.error(err);
);
</script>

在我的 tsconfig.json 中，我有

  "compileOnSave": true,
  "compilerOptions": 
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  ,
  "exclude": [
    "node_modules",
    "app/aotfactories"
  ]

在我的 package.json 依赖项中，我有（与配置相关的依赖项）

"core-js": "^2.5.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.3",
"systemjs": "^0.20.19",
"typescript": "^2.5.2",
"zone.js": "^0.8.14",

我相信/core-js/client/shim.min.js 行可以达到我的目的，但是当在 IE/Firefox/Safari 上检查时，它仍然没有任何影响。我来自 SystemJS 背景，对基于 webpack/cli 的解决方案知之甚少。

我发布的供应商包包含相同的/core-js/client/shim.min.js，但它们也不适用于 AOT。

【问题讨论】：

如果你的应用中没有最后一个，它甚至对 Chrome 也不起作用，所以我猜你已经以某种方式导入了它们

@AngularInDepth.com 没有最后的什么？它在 chrome 和 edge 中正常工作，但在其他人中不能正常工作 https://carbid.co.il/

最后 3 个依赖项

@AngularInDepth.com 他们来自node_modules，它在chrome和edge中工作正常，但在firefox或ie上没有加载角度

【参考方案1】：

晚了，但如果有人发现这个，我认为问题是你需要一个 promise polyfill。

system-polyfills.js 随 systemjs 一起提供，我打算做这样的事情来加载它： 如果（window.Promise === 未定义） // 加载 system-polyfills.js

...现在的问题是关于加载的，我想我只需将一个新的脚本元素附加到正文或其他东西上，看看它是如何工作的...