加载模块脚本失败 - text/html 而不是 application/javascript答案

【问题标题】：Failed to load module script – text/html instead of application/javascript加载模块脚本失败 - text/html 而不是 application/javascript
【发布时间】：2022-06-30 22:47:01
【问题描述】：

Angular 12，后端 .NET 5 部署在同一个 IIS 实例上。没有负载平衡器。

我遇到了一个文本/html 而不是应用程序/javascript 响应问题，这种问题很少发生，而且似乎是随机的，我无法查明原因。

加载模块脚本失败：服务器响应 “text/html”的非 JavaScript MIME 类型。严格的 MIME 类型检查是根据 HTML 规范对模块脚本强制执行。 Main-es2015.6ed6d8b....js:1

刷新页面解决了问题，但网站卡住了。我不确定它是由 Service Worker 还是其他原因引起的。发生在 Edge 和 Chrome 上。 Angular 是在生产模式下构建的。

当出现此错误时，页面加载如下：failure

两个 main-es2015.js 都有 text/html 响应，并且其中的 content 是我的 index.html 文件，其中添加了脚本/样式引用而不是纯 JavaScript：failure script text/html

成功时：success

来自同一个错误响应线程 Failed to load module script 我看到了响应，但我已经有了：

C# 启动：

public void ConfigureServices(IServiceCollection services) {
                services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}

public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                app.**UseSpaStaticFiles**();
}

角度索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <base **href="/"** />
  </head>
  <body>
  </body>
</html>

此错误期间的 IIS 服务器日志：

2022-05-27 13:18:30 W3SVC2 SERVER-XX GET / - 80 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:30 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 - adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /main-es2015.6ed6d8b5172c982059f0.js - 443 adressMozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:32 W3SVC2 SERVER-XX GET /ngsw-worker.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /ngsw.json ngsw-cache-bust=0.7298837691083289 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /index.html - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:35 W3SVC2 SERVER-XX GET /main-es2015.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress
2022-05-27 13:18:37 W3SVC2 SERVER-XX GET /main-es5.c448947b8e21da262380.js - 443 adress Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/adress+Safari/537.36+Edg/adress

其他脚本也出现此问题： multiple scripts failing to this error

【问题讨论】：

OP 在这里，在 tsconfig 中我有 es2015、es6、es2016 的目标组合。 10 天前更改了所有内容以构建和定位 es2020。仍然需要时间来观察这是否是罪魁祸首，但从那以后就没有看到这个错误（不和谐的人建议调整 tsconfig）。
很遗憾今天收到了同样的错误信息。 .js 带有我的 index.html 内容。刷新页面，一切正常。所以 tsconfig 更改没有帮助。角 14

标签： javascript asp.net angular mime-types angular-service-worker

【解决方案1】：

我的理论：问题是客户端缓存的 index.html 引用了旧的（在部署期间删除）版本文件，但浏览器丢失了缓存的 .js 或由于某些其他原因尝试从服务器请求现在已删除的文件。请求通过 IIS 文件系统、.NET 后端并最终回退到 Angular 以进行最终路由匹配。它返回 index.html，因为如果它是用户直接调用浏览器 URL，它将尝试加载 Angular 应用程序并尝试匹配 Angular 路由。但是调用是由应用程序发出的，所以它只得到初始的 index.html 响应并中断。我实现的是在管道 CD 过程中，我将那些旧的散列文件移动到临时文件夹，一旦部署完成，我从临时文件夹中返回这些文件。因此，在极少数情况下，应用程序可以加载，然后 Service Worker 更新程序会推送最新版本。

    - task: PowerShell@2
      displayName: "Move versioned Angular scripts to temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Moves hashed js and css files that are 6 months old or newer to %temp% folder
          $dateFromWhichToInclude = (Get-Date).AddMonths(-6).Date; `
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          New-Item -Type Directory -Path $tempFolderPath -Force | Out-Null; `
          Get-ChildItem -Path $angularRoot | Where-Object{ ($_.Name -match '\.\w{10,30}\.(js|css)') `
          -and ($_.CreationTime -ge $dateFromWhichToInclude) } `
          | Copy-Item -Destination $tempFolderPath –PassThru


    - task: PowerShell@2
      displayName: "Move versioned Angular scripts back from temp folder"
      inputs:
        targetType: inline
        script: |
          # Requirement is to have access to the root angular folder directly.
          # Once files are moved back, the created temp folder is deleted
          $angularRoot = "${{ parameters.iis_website_physical_path }}\Client\dist\AngularSpa"; `
          $tempFolderPath = Join-Path $Env:Temp previous-version-scripts; `
          Copy-Item -Path "$($tempFolderPath)\*" -Destination $angularRoot –PassThru; `
          Remove-Item $tempFolderPath -Force -Recurse

【讨论】：