CSS MIME mismatch in browser using Angular and Deno

user_2614313 0
Viewed 103

I'm setting up an Angular-Deno stack proof of concept. For Angular app generation @angular/cli version 9.1.9 is used. After the app was generated, I create a production build with npm run build -- --prod and the output is in the dist folder of the application.

The deno server code is following:

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 });

The paths are correct, the built Angular app is in ./client/dist/client.

When I start the server with deno run --allow-net --allow-read .\server.ts command and navigate to `http://localhost:8080/ url in the browser the Angular application is downloaded. This is working fine.

However, there is a warning on the browser console:

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

enter image description here

I checked the generated index.html of the Angular app, and the CSS reference looks following:

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

If I change the above <link> to 

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

then it is working fine, the warning disappears from the browser console.

Is there a way to generate the index.html of the Angular app so that it contains the <link> entry of the second way above? Or is there a configuration in deno request pipeline that can handle the originally generated <link> entry of the Angular app and set the CSS MIME correctly?

I would like to avoid using a custom post-build script to change the <link> entry of the generated html.

deno angular
1 Answers

The link tag is correct but the abc framework is not setting the right Content-Type header for css files, in fact static middleware does not set Content-Type at all for any file type.

To fix it, you can set the Content-Type yourself using a middleware, or use a framework that has that functionality already built-in. You can use 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 });
user_11198630
Related