加载模块脚本失败 - text/html 而不是 application/javascript
[英]Failed to load module script – text/html instead of application/javascript
问题描述
Angular 12, Backend .NET 5 on same IIS instance deployed. 
Angular 12，后端 .NET 5 部署在同一个 IIS 实例上。 No load balancers.没有负载平衡器。
I'm having a text/html instead of application/javascript response issue that occurs rarely and it seems at random and I can't pinpoint the cause.我遇到了一个 text/html 而不是 application/javascript 响应问题，这种问题很少发生，而且似乎是随机的，我无法查明原因。
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".
Refresh page fixes the issue but else website is stuck.刷新页面解决了问题，但其他网站卡住了。 I'm not sure if it's caused by Service Worker or something else.我不确定它是由 Service Worker 还是其他原因引起的。 Happened on both Edge and Chrome.发生在 Edge 和 Chrome 上。 Angular is built with production mode. Angular 是使用生产模式构建的。
When this error is present page loads like this: failure当出现此错误时，页面加载如下：失败
Both main-es2015.js have text/html response and content inside them is my index.html file with added script/style references instead of pure JavaScript: failure script text/html main-es2015.js 都有 text/html 响应，其中的内容是我的 index.html文件，其中添加了脚本/样式引用而不是纯 JavaScript：失败脚本文本/html
From same error response thread Failed to load module script I see responses but I already have:从相同的错误响应线程Failed to load module script我看到响应但我已经有了：
C# startup: C#启动：
public void ConfigureServices(IServiceCollection services) {
services.**AddSpaStaticFiles**(configuration => configuration.RootPath = "Client/dist/AngularSpa");
}
public static void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
app.**UseSpaStaticFiles**();
}
Angular index.html:角度索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<base **href="/"** />
</head>
<body>
</body>
</html>
IIS Server logs during this error:此错误期间的 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
The issue also happened with other scripts: multiple scripts failing to this error其他脚本也出现此问题：多个脚本未能出现此错误
1 个解决方案
解决方案1
1 2022-06-30 14:47:01
My theory: The issue is that client cached index.html references old (deleted during deployment) version files but the browser loses cached .js or for some other reason attempts to request now deleted file from the server.我的理论：问题是客户端缓存的 index.html 引用了旧的（在部署期间删除）版本文件，但浏览器丢失了缓存的 .js 或出于其他原因尝试从服务器请求现在已删除的文件。 The request fallbacks through IIS filesystem, .NET backend and finally to Angular for final route match.请求通过 IIS 文件系统、.NET 后端并最终回退到 Angular 以进行最终路由匹配。 It returns index.html because if it was direct call on browser URL by the user it would attempt to load Angular app and attempt matching Angular route.它返回 index.html，因为如果它是用户直接调用浏览器 URL，它将尝试加载 Angular 应用程序并尝试匹配 Angular 路由。 But the call was made by application so it gets just initial index.html response and breaks.但是调用是由应用程序发出的，所以它只得到初始的 index.html 响应并中断。 What I implemented is during pipeline CD process I move those old hashed files to temp folder and once deployment is done I return those files from the temp folder.我实现的是在管道 CD 过程中，我将那些旧的散列文件移动到临时文件夹，一旦部署完成，我会从临时文件夹中返回这些文件。 So in those rare situations the application can load and then service worker updater pushes the latest version.因此，在极少数情况下，应用程序可以加载，然后服务工作者更新程序推送最新版本。
- 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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.