Angular中的MIME类型问题

Question

当我尝试加载我的主页时，出现以下错误并且页面是空白的。

main-es2015.5ff489631e1a2300adb7.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

runtime-es2015.2c9dcf60c8e0a8889c30.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

vendor-es2015.02ac05cd7eee1cf62f5a.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

这在之前是能够正常工作的，在开发环境下使用 ng serve 时也能够正确运行。问题出现在从服务器上运行代码时。当我使用开发工具检查时，它显示的是 content-type 和 text/html 而不是 application/javascript。如何解决？需要从服务器设置什么吗？

- Happy Coder

---

@Dimanoid 这个应该在哪里设置？在服务器端还是在 Angular 中？ - Happy Coder

你有没有得到这个问题的答案？ - DeadlyChambers

不是的。实际上，我的问题与亚马逊云服务有关，因为由于时区问题，它无法正确解析文件。当这个问题得到解决后，应用程序就正常工作了。 - Happy Coder

你是如何使用AWS解决这个问题的？ - SeanRtS

我使用Amazon CloudFront（而不是Cloudflare）作为网站的CDN和缓存。它发送了错误的时间戳，因此出现了问题。通过更改一些时区设置，问题已经得到解决，但由于是服务器管理员解决的，所以我不确定具体是如何解决的。 - Happy Coder

使用Akamai CDN时，我们偶尔会遇到一种情况，即错误的文件被积极缓存（可能是由于有错误的部署提供了错误的标头，从而允许其缓存），因此需要进入控制面板并显式地清除缓存。这只是一个想法。 - Ed Randall

Answer 1

Angular路由到您的域名根目录。部署到子文件夹可能会正确引用：

ng build --prod --base-href yoursubfolder

- Arthur Zennig

---

正如我在评论中提到的那样，这个问题与Cloudfare缓存时区设置有关，当Cloudfare问题得到解决时，问题也得到了解决。 - Happy Coder

TZ事实已经注意到。我也遇到了同样的错误，子域名解决方案确实修复了问题。尽管之前有关TZ的评论，但我将解决方案添加到了问题中，以供那些遇到子域名问题的人参考。 - Arthur Zennig

谢谢！消息“服务器响应的MIME类型为"text/html"不是JavaScript MIME类型”只是一个未找到的HTML页面返回。 - Jeppe

Answer 2

"服务器响应的MIME类型为"text/html"，而不是JavaScript" 这个问题实际上是文件未找到。

当我们尝试使用以下代码通过Express NodeJS服务Angular构建应用程序时，就会出现这种情况。

const app = express();
app.use(express.static(__dirname + 'dist/application'));

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/application/index.html'));
});

app.listen(process.env.PORT || 8880);

当Angular尝试访问一些未找到的文件时，会出现此问题。

以下是使用Express代码解决的问题。

const _port = 4100;
const _app_folder = 'dist/application';
const app = express();

// ---- SERVE STATIC FILES ---- //
app.get('*.*', express.static(_app_folder, {maxAge: '1y'}));

// ---- SERVE APLICATION PATHS ---- //
app.all('*', function (req, res) {
    res.status(200).sendFile(`/`, {root: _app_folder});
});

// ---- START UP THE NODE SERVER  ----
app.listen(_port, function () {
    console.log("Node Express server for " + app.name + " listening on http://localhost:" + _port);
});

这应该解决了你的问题。

- Alok Adhao

Answer 3

经过长时间搜索，我找到了解决方法。Ang9在index.html的标签中不包含MIME类型：

如果在tsconfig.json中设置"target": "es2015"，则添加type="module"

<script src="runtime-es2015.703a23e48ad83c851e49.js" type="module">`

如果目标是 "es5"，则添加 nomodule

。

<script src="runtime-es5.465c2333d355155ec5f3.js" nomodule>

- LidiaWebDev