Angular 10 - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应
Posted
技术标签:
【中文标题】Angular 10 - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应【英文标题】：Angular 10 - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html" 【发布时间】：2020-12-01 12:08:00 【问题描述】：升级到 Angular 10 后，我在部署到 Azure 应用服务后看到： 加载模块脚本失败：服务器以“text/html”的非 javascript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。
我的 tsconfig.base.json 看起来像这样：
"compileOnSave": false,
"compilerOptions":
"baseUrl": "./",
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
这似乎很重要：out-tsc 似乎没有发布到服务器。在其他成功部署的应用程序中，我可以在我的所有页面文件中看到这种直接性。
目标 es6 产生这个：
加载模块脚本失败：服务器响应 “text/html”的非 JavaScript MIME 类型。严格的 MIME 类型检查是 根据 HTML 规范强制执行模块脚本。
<body class="mat-typography">
<app-root>
<span style="text-align: center;">
Loading...
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</span>
</app-root>
<script src="runtime-es2015.3ee9a79b8d90d488eb6e.js" type="module"></script>
<script src="runtime-es5.3ee9a79b8d90d488eb6e.js" nomodule="" defer=""></script>
<script src="polyfills-es5.a80f72600a0bfdce44d9.js" nomodule="" defer=""></script>
<script src="polyfills-es2015.92e0624093dad79ad88a.js" type="module"></script>
<script src="main-es2015.b16c8d48817baaf425be.js" type="module"></script>
<script src="main-es5.b16c8d48817baaf425be.js" nomodule="" defer=""></script>
</body>
在关注https://github.com/angular/angular/issues/30835 和MIME type issue in Angular 这个线程之后，我尝试了所有这些解决方案，即使是这样：
目标 es5 产生这个：
Uncaught SyntaxError: Unexpected token '
<body class="mat-typography">
<app-root>
<span style="text-align: center;">
Loading...
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</span>
</app-root>
<script src="runtime.208caafb01abdda3ac51.js" defer=""></script>
<script src="polyfills-es5.baef76646d9ddccffa84.js" nomodule="" defer=""></script>
<script src="polyfills.4ff3e861f9f5817874c8.js" defer=""></script>
<script src="main.4ad4acf8ee80919cf267.js" defer=""></script>
</body>
我不知道还能做什么？
【问题讨论】：
【参考方案1】：原来，在 DotNetCore 3.1 中，我已经删除了
app.UseSpaStaticFiles();
来自 Startup.cs，这样做破坏了一些重要的东西。
【讨论】：
我将配置文件更改为本地开发环境的 appsettings.Local.json，而不是使用默认为您创建的 appsettings.Development.json。所以我不得不去 Startup.cs 文件并将 env.IsDevelopment() 的实例更改为 env.IsEnvironment("Local") 来解决这个问题。那条线正在保护 app.UseSpaStaticFiles()。以上是关于Angular 10 - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应的主要内容，如果未能解决你的问题，请参考以下文章
GCP App Engine / Angular - 无法加载模块脚本：服务器以“text/html”的非 JavaScript MIME 类型响应
更新到 Angular v6 - 找不到模块：错误：无法解析“fs”