Таблица стилей не загружена из-за углового приложения MIME-типа - PullRequest
Новая
       25

Таблица стилей не загружена из-за углового приложения MIME-типа

0 голосов
/ 30 ноября 2018

Я работаю над приложением Angular 6.x, в котором я пытаюсь изменить тему (динамически).

CLI все компилируется правильно, но в developer console я получаю это сообщение об ошибке.

Отказался от применения стиля из 'http://localhost:4200/vendor/theme-light.css', поскольку его тип MIME (' text / html ') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Моя файловая структура выглядит так, путь правильный 

project
    |-src
      |-vendor
         |-theme-light.css
          |theme-dark.css

Мой код смены темы выглядит так 

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';

 @Component({
     ..
     ..
})

linkRef: HTMLLinkElement;

  themes = [
    { name: 'Light', href: '../vendor/theme-light.css' },
    { name: 'Dark', href: '../vendor/theme-dark.css' }
  ];

  constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(this.platformId)) {
      let theme = this.themes[0];
      try {
        const stored = localStorage.getItem('theme');
        if (stored) {
          theme = JSON.parse(stored);
        }
      } catch (e) {
      }
      this.linkRef = this.document.createElement('link');
      this.linkRef.rel = 'stylesheet';
      this.linkRef.href = theme.href;
      this.document.querySelector('head').appendChild(this.linkRef);
    }
  }

  setTheme(theme) {
    localStorage.setItem('theme', JSON.stringify(theme));
    this.linkRef.href = theme.href;
  }

Теперь я не совсем понимаю, почему этослучается.Я что-то упустил?Не стесняйтесь спрашивать более подробную информацию, если это необходимо.

Любая помощь будет по достоинству оценена.

Спасибо

Ответы [ 4 ]

0 голосов
/ 17 мая 2019

вам нужно изменить место вашего файла css в каталог assets assets / style.css

и затем поместить эти пути в ваш файл index.html src / index.html 

<link rel="stylesheet" type="text/css" href="assets/style.css" />

Кроме того, вы должны изменить файл angular.json в стилях 

"styles": [
          "src/assets/style.css",
          "./node_modules/materialize-css/dist/css/materialize.min.css",
        ],
0 голосов
/ 30 ноября 2018

Нашел ответ здесь Правильное решение

Возможно, проблема в библиотеке CSS, начинающейся с комментариев.Находясь на dev, мы не минимизируем файлы и не удаляем комментарии, это означало, что таблица стилей начиналась с некоторых комментариев, в результате чего она воспринималась как нечто отличное от css.

Удаление библиотеки и ее помещениев файл вендора (который ВСЕГДА минимизирован без комментариев) решил проблему.

0 голосов
/ 30 ноября 2018

Наконец-то понял, что я задаю неверный путь в конфигурации моего пути href: '../vendor/theme-light.css', то есть возвращает http://localhost:4200/vendor/theme-light.css в браузере, который не является правильным путем.

Решение 

themes = [
    //added the missing src ( source root) 
    { name: 'Light', href: '../src/vendor/theme-light.css' },
    { name: 'Dark', href: '../src/vendor/theme-dark.css' }
  ];

Спасибо за ваши ответы

0 голосов
/ 30 ноября 2018

Похоже, что href не так.

Есть хороший ответ на другой вопрос, точно такой же, как у вас:

Обычная причина этой ошибкисообщение заключается в том, что когда браузер пытается загрузить этот ресурс, сервер возвращает страницу HTML, например, если ваш маршрутизатор перехватывает неизвестные пути и отображает страницу по умолчанию без ошибки 404.Конечно, это означает, что путь не возвращает ожидаемый файл CSS / изображение / значок / что угодно ...

Решение состоит в том, чтобы найти правильный путь и конфигурацию маршрутизатора, чтобы вы получилипростой CSS файл / изображение / и т. д. при доступе к этому пути.

В вашем случае это css href.

...