как заменить angular тему CSS таблицу стилей для всего приложения?

Question

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

если я попробую чтобы импортировать его через angular. json, тогда я не могу вставить тег ID id = "themeAsset".

Причина, по которой я хочу добавить id, заключается в том, что я хочу сделать это из https://material.angular.io/guide/theming

function changeTheme (themeName) {document.getElementById ('themeAsset'). Href = /path/to/my/${themeName}.css; } поэтому я мог изменить стиль для всех стилей приложения щелчком вместо добавления классов к каждому компоненту

Answer 1

Рабочий стек: - https://stackblitz.com/edit/angular-jrkmhn

Я поместил свой css в папку с ресурсами, т.е. myStyles. css

CSS: -

.myDiv {
  background-color: black;
}

индекс. html

<link id="myLink">
<my-app>loading</my-app>

app.component. html

<div class="myDiv">Css Will Load</div>

<button style="margin-top: 2em" (click)="changeTheme('')">Change Theme</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';


changeTheme(themeName) {
   var elem = document.getElementById('myLink');
   elem.setAttribute('href','./assets/myStyles.css');
   elem.setAttribute('rel','stylesheet');
   elem.setAttribute('type','text/css');
}
}