Как динамически загрузить css указатель стилей c в компонент в angular

Question

Я пытаюсь загрузить некоторую CSS спецификацию таблицы стилей c в компонент, просто чтобы не было конфликта с остальной частью проекта.

Функция в моем AppService

  static loadCSS(url) {
    const link = document.createElement('link');
    link.href = url;
    link.rel = 'stylesheet';
    link.type = 'text/css';

    const head = document.getElementsByTagName('head')[0];
    const style = head.getElementsByTagName('style')[0];

    head.insertBefore(link, style);
  }

У меня есть массив таблиц стилей в нужном компоненте

  pagesCSS = [
    'assets/plugins/bootstrap/css/bootstrap.min.css',
    'assets/plugins/font-awesome/css/all.min.css',
    'assets/plugins/toastr/toastr.min.css',
    'assets/css/lime.min.css',
    'assets/css/custom.css'
  ];

И, наконец,

  ngOnInit() {
    AppService.loadCSS(this.pagesCSS);
  }

Я получаю эту ошибку

 The resource from “http://localhost:4200/assets/plugins/bootstrap/css/bootstrap…toastr.min.css,assets/css/lime.min.css,assets/css/custom.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).