CSS 使用 Angular 和 Deno 的浏览器中的 MIME 不匹配

Question

我正在设置 Angular-Deno 堆栈概念验证。 Angular 应用生成 @angular/cli 使用版本 9.1.9。生成应用程序后，我使用 npm run build -- --prod 创建了一个生产版本，输出位于应用程序的 dist 文件夹中。

deno 服务器代码如下：

import { Application } from "https://deno.land/x/abc@v1.0.0-rc8/mod.ts";

const app = new Application();

app.static("/", "./client/dist/client");
app.file("/", "./client/dist/client/index.html");
app.start({ port: 8080 });

路径正确，构建的 Angular 应用在 ./client/dist/client.

当我使用 deno run --allow-net --allow-read .\server.ts 命令启动服务器并在浏览器中导航到 `http://localhost:8080/ url 时，会下载 Angular 应用程序。这工作正常。

但是浏览器控制台出现警告：

Resource interpreted as Stylesheet but transferred with MIME type text/plain

我检查了 Angular 应用程序生成的 index.html，CSS 参考如下：

<link rel="stylesheet" href="styles.09e2c710755c8867a460.css"></head>

如果我把上面的<link>改成

<link type="text/css" href="styles.09e2c710755c8867a460.css"></head>

然后它工作正常，警告从浏览器控制台消失。

有没有办法生成Angular应用程序的index.html，使其包含上面第二种方式的<link>入口？或者在 deno 请求管道中是否有一个配置可以处理 Angular 应用程序最初生成的 <link> 条目并正确设置 CSS MIME？

我想避免使用自定义 post-build 脚本来更改生成的 html.

的 <link> 条目

Answer 1

link 标签是正确的，但是 abc 框架没有为 css 文件设置正确的 Content-Type header，事实上 static 中间件根本不为任何文件类型设置 Content-Type。

要修复它，您可以使用中间件自行设置 Content-Type，或者使用已经具有该功能的框架 built-in。您可以使用 Oak.

import { Application, send } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}/client/dist/client`,
    index: "index.html",
  });
});

await app.listen({ port: 8080 });

CSS 使用 Angular 和 Deno 的浏览器中的 MIME 不匹配

CSS MIME mismatch in browser using Angular and Deno

angular

deno