时间戳

首页 > 解决方案 > Angular：从同一项目/分支上的两台不同 PCS 构建的 ng 在 index.html 中生成两个不同版本的脚本，从而导致错误

angular - Angular：从同一项目/分支上的两台不同 PCS 构建的 ng 在 index.html 中生成两个不同版本的脚本，从而导致错误

问题描述

所以一切都很顺利，直到我决定做以下事情：

在一个完全不同的项目上创建了一个新的 Flutter 应用程序后，我决定推送我正在处理的最新分支，该分支是在不同的 vscode 窗口中打开的。

在 ng build 之后，我推送到我的暂存环境并遇到“无法加载模块脚本：服务器以非 JavaScript MIME 类型的“text/plain”响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。错误。

这真的很奇怪，因为我没有更改服务器端的任何设置或我的 Angular 项目中的任何配置设置。

通常在 ng build 之后，dist/index.html 文件底部的脚本如下所示：

<app-root></app-root>
<script src="runtime-es2015.4d42af9040dc5f9d6e81.js" type="module"></script>
<script src="runtime-es5.4d42af9040dc5f9d6e81.js" nomodule defer></script>
<script src="polyfills-es5.2233b50e9378626b00f1.js" nomodule defer></script>
<script src="polyfills-es2015.7f46587a0e6ec41939dd.js" type="module"></script>
<script src="scripts.9fc52888a9a75ff81dc6.js" defer></script>
<script src="main-es2015.2ce4c230baec78aca787.js" type="module"></script>
<script src="main-es5.2ce4c230baec78aca787.js" nomodule defer></script>
</body>
</html>

然而，由于我安装了颤振，我的 dist/index.html 文件现在看起来像这样：

<body>
<app-root></app-root>
<script src="runtime-es2015.4d42af9040dc5f9d6e81.js" type="module"></script>
<script src="runtime-es5.4d42af9040dc5f9d6e81.js" nomodule defer></script>
<script src="polyfills-es5.2233b50e9378626b00f1.js" nomodule defer></script>
<script src="polyfills-es2015.7f46587a0e6ec41939dd.js" type="module"></script>
<script src="scripts.9fc52888a9a75ff81dc6.js" defer></script>
<script src="main-es2015.94ae9c9dc343ecbeefc1.js" type="module"></script>
<script src="main-es5.94ae9c9dc343ecbeefc1.js" nomodule defer></script>
</body>
</html>

在其他计算机上构建相同的分支会产生正确的 dist/index.html 但由于某种原因在我的 pc/vscode 上最后两个脚本

main-es2015.94ae9c9dc343ecbeefc1.js 和 main-es5.94ae9c9dc343ecbeefc1.js 以某种方式被扭曲了。

我没有对任何配置应用程序进行任何更改，例如

tsconfig.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/app/core/abstructs/upload-file-base.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

或 tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

标签： angularvisual-studio-code

解决方案

推荐阅读