CSS Несоответствие MIME в браузере с использованием Angular и Deno - PullRequest
Новая
       11

CSS Несоответствие MIME в браузере с использованием Angular и Deno

2 голосов
/ 26 мая 2020

Я настраиваю доказательство концепции стека Angular -Deno. Для генерации приложения Angular используется @angular/cli версия 9.1.9. После создания приложения я создаю производственную сборку с npm run build -- --prod, а результат находится в папке dist приложения.

Код сервера обозначения следующий: 

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

enter image description here

Я проверил сгенерированный index.html приложения Angular, а ссылка CSS выглядит следующим образом: 

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

Если я изменю указанное выше <link> на 

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

, то оно работает хорошо, предупреждение исчезает из консоли браузера.

Есть ли способ сгенерировать index.html приложения Angular, чтобы оно содержало <link> запись из второго способа выше? Или есть конфигурация в конвейере запросов обозначения, которая может обрабатывать изначально сгенерированную запись <link> приложения Angular и правильно устанавливать CSS MIME?

Я бы хотел избежать использования настраиваемого пост- скрипт сборки для изменения записи <link> в сгенерированном html.

1 Ответ

1 голос
/ 26 мая 2020

Тег link правильный, но структура abc не устанавливает правильный заголовок Content-Type для файлов css, на самом деле промежуточное ПО static не устанавливает Content-Type вообще для любого типа файлов.

Чтобы исправить это, вы можете установить Content-Type самостоятельно с помощью промежуточного программного обеспечения или использовать фреймворк, в котором эта функциональность уже встроена. Вы можете использовать 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 });
...