tldr;
在独立服务器上运行时,使用 target=es2015 和差异加载在 IE11 中构建应用程序。
使用 target=es5 构建它在 IE11中不起作用
可重现代码示例:https ://github.com/thegreatanon/prism-ie-crash/tree/master
完整的细节
我正在构建的 Angular 8 应用程序需要与 IE11 兼容。为了确保这一点,我需要在开发过程中不时对其进行测试。
现在在 Angular 8 中引入了差异加载,当在浏览器列表中启用 IE11 时,它将构建一个 es2015 和一个 ES5 文件。当获取这些生成的文件并在独立服务器上运行它们时,它将在 IE11 中运行良好。但这很麻烦。
使用 ng serve 只会创建 ES2015 版本,因此在 IE 中不起作用。
然后我创建一个不同的配置来设置totarget
并将其作为 ng serve --configuration es5 运行compilationOptions
es5
使用这种方法时,一旦单击导航中的项目(触发模块的延迟加载),我会在 IE 控制台中收到以下错误。
SCRIPT1006: Expected ')'
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk example-example-module failed.
查看发生错误的行,我看到以下内容:
function ChangeDetection(detection = true, properties) {
显然,该函数中的默认参数是罪魁祸首,因为 ES5 不支持此功能。
如您所见,代码来自 Angular-package/change-detection,因为我使用的是 angular-package/prism,所以包含在内。
似乎外部代码只是按原样包含并没有被转换为 ES5。
顺便说一句,当我为 ES5 构建并在我的独立服务器中运行它时,我遇到了同样的错误。ng serve
所以它可能与命令本身没有任何关系。
因为当在 Angular 中使用差分加载设置时,ES5 构建确实有效,似乎有什么神奇之处?
谁能告诉我如何让这些外部资源转译为 ES5?
tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["dom", "es2018"],
"strict": true,
"paths": {
"@mylib/angular-components": ["lib"],
"@mylib/angular-components/*": ["lib/*"]
}
},
"exclude": ["out", "node_modules", "dist", "lib"],
"angularCompilerOptions": {
"preserveWhitespaces": false,
"fullTemplateTypeCheck": true
}
}
浏览器列表
"browserslist": [
"last 5 Chrome version",
"last 5 Safari version",
"last 5 Firefox version",
"last 5 Edge version",
"last 5 iOS version",
"last 5 ChromeAndroid version",
"IE 11",
"> 1%"
]