Angular 13从VS2019升级到VS2022后运行报错求助

报错信息 #

runtime.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
polyfills.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vendor.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
main.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
:44395/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

解决步骤 #

1. 核对静态文件路径与部署配置

• 检查VS2022项目的调试URL：右键项目→属性→调试→应用URL，确保和Angular项目angular.json中build配置的baseHref一致（通常为"/"），避免JS文件请求路径错误返回HTML 404页面。
• 执行ng build重新编译项目，确认dist目录下runtime.js、polyfills.js等文件生成完整，且VS已将dist目录设为静态文件根目录。

2. 修复MIME类型映射

• 若为ASP.NET项目，打开web.config添加MIME类型配置：

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

• 确认IIS Express已正确配置.js和.json的MIME类型，避免服务器错误识别文件类型。

3. 修正manifest.json语法错误

• 打开项目manifest.json文件，检查首行是否有多余字符、引号缺失或逗号不匹配等语法问题，确保为标准JSON格式，示例：

{
  "name": "你的应用名称",
  "short_name": "应用简称",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

• 若为Angular自动生成，检查angular.json中manifest配置路径是否正确，重新执行ng build生成文件。

4. 禁用BrowserLink排查干扰

• 点击VS2022顶部工具栏的BrowserLink按钮（刷新图标旁下拉菜单），选择Disable Browser Link，避免该功能干扰静态文件加载。

内容的提问来源于stack exchange，提问作者user1939378