2

升级到 Angular 8 后,ng build生成一个支持差异加载的正确 index.html,但ng serve生成一个不同的 index.html,其中仅包含对某些生成的“es5”脚本的引用。因此,该应用程序无法在 IE 11 等 ES5 浏览器中运行。

到目前为止,我有:

  • 确认该应用程序在现代 ES2015+ 浏览器(如 Chrome)中按预期运行
  • 确认该应用在 Angular 8 升级之前在 IE 11 上运行
  • 比较 IE 11 中的 index.html 源代码与 dist 目录中生成的源代码 from ng build,可以看到脚本引用的差异(参见下面的示例代码)
  • 在 Github 和 stackoverflow 上搜索 angular 和 angular-cli 问题以查找类似问题
  • 尝试使用和不使用 angular.json 中即将弃用的 es5BrowserSupport 选项构建和服务
  • 更新到最新版本的 @angular-devkit 和 @angular 包

我正在处理的存储库包含一个应用程序项目和一个库项目。以下是 Angular 8 升级后来自 angular.json 的相关架构目标:

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ng-shared-components-tester",
            "index": "projects/ng-shared-components-tester/src/index.html",
            "main": "projects/ng-shared-components-tester/src/main.ts",
            "polyfills": "projects/ng-shared-components-tester/src/polyfills.ts",
            "tsConfig": "projects/ng-shared-components-tester/tsconfig.app.json",
            "assets": [
              "projects/ng-shared-components-tester/src/favicon.ico",
              "projects/ng-shared-components-tester/src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "projects/ng-shared-components-tester/src/styles.css",
              "node_modules/abc-emerald-standards/dist/emerald/assets/css/default.css",
              "node_modules/abc-emerald-standards/dist/emerald/assets/css/forms.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/ng-shared-components-tester/src/environments/environment.ts",
                  "with": "projects/ng-shared-components-tester/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng-shared-components-tester:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng-shared-components-tester:build:production"
            }
          }
        },

这是启用了 IE 11 支持的 browserlist 文件:

> 0.5%
last 4 versions
IE 11
not dead

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "module": "esnext",
    "paths": {
      "@abc/ng-shared-components": [
        "dist/abc/ng-shared-components"
      ],
      "@abc/ng-shared-components/*": [
        "dist/abc/ng-shared-components/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
}

预期结果

ng build在 dist/ng-shared-components-tester/index.html 中生成预期结果:

<body>
  <app-root></app-root>
  <script src="runtime-es2015.js" type="module"></script>
  <script src="polyfills-es2015.js" type="module"></script>
  <script src="runtime-es5.js" nomodule></script>
  <script src="polyfills-es5.js" nomodule></script>
  <script src="styles-es2015.js" type="module"></script>
  <script src="styles-es5.js" nomodule></script>
  <script src="vendor-es2015.js" type="module"></script>
  <script src="main-es2015.js" type="module"></script>
  <script src="vendor-es5.js" nomodule></script>
  <script src="main-es5.js" nomodule></script>
</body>

实际结果

ng serve正在为仅包含 ES5 版本的 pollfills.js 的 IE 11 提供 index.html:

<body>
  <app-root></app-root>
  <script src="runtime.js"></script>
  <script src="polyfills-es5.js" nomodule></script>
  <script src="polyfills.js"></script><script src="styles.js"></script>
  <script src="vendor.js"></script>
  <script src="main.js"></script>
</body>
4

2 回答 2

3

经过一番挖掘后,我在 GitHub 上找到了这个讨论,表明默认情况下ng serveng build --watch设计上禁用了差异加载。这似乎是出于性能原因(差异加载需要运行 2 个构建,ES5 和非 ES5)。有一种解决方法可以使用 ES5 包而不是默认包。

于 2019-06-11T14:56:08.453 回答
1

这是您的代码的正确行为。Angular CLi 将检测浏览器并在运行时注入 polyfill 脚本,如下所示

在此处输入图像描述

因此,如果您使用的是旧版浏览器,您将使用没有模块标签的脚本

你可以在这里阅读更多

于 2019-06-11T03:48:30.573 回答