2

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 运行compilationOptionses5

使用这种方法时,一旦单击导航中的项目(触发模块的延迟加载),我会在 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%"
    ]
4

1 回答 1

0

在浏览器列表文件中,您必须删除not支持 IE11 的not IE 9-11 # For IE 9-11 support, remove 'not'.IE 9-11 # For IE 9-11 support, remove 'not'.

欲了解更多信息:查看这篇文章的差异加载段落 https://blog.angularindepth.com/embrace-yourself-angular-8-is-coming-1bf187c8f0bf

于 2019-08-28T13:44:13.850 回答