ленивая загрузка темы css в angular

Question

Экспериментирую с ленивой css загрузкой в ​​angular. У меня есть простое поле со списком, где пользователь может выбрать тему, и после сохранения эта тема применяется ко всему приложению angular. Для этого я нашел эту запись в блоге .

В соответствии с этим я сделал следующую модификацию файла angular. json:

"styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.material.blue.light.compact.css",
              {
                "input": "node_modules/devextreme/dist/css/dx.light.css",
                "bundleName": "generic-light",
                "inject": false
              },
              "src/styles.css",
              "src/customized.material.css"
            ],

Компонент приложения выглядит так:

export class AppComponent implements OnInit {

  title = 'InvoiceWFAngular';

  constructor(@Inject(DOCUMENT) private document: Document) {
    loadMessages(huMessages);
    locale("hu");
    this.loadStyle("generic-light.css");
  }

  ngOnInit() {
    config({
      editorStylingMode: "filled"
    });
  }

  loadStyle(styleName: string) {
    const head = this.document.getElementsByTagName('head')[0];

    let themeLink = this.document.getElementById('client-theme') as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = styleName;
    } else {
      const style = this.document.createElement('link');
      style.id = 'client-theme';
      style.rel = 'stylesheet';
      style.href = `${styleName}`;
      head.appendChild(style);
    }
  }
}

После сборки я получаю эту ошибку в консоли:

введите описание изображения здесь

Почему это? Что я не так? И если я установлю "extractCss": true, я получу ту же ошибку.

Другой вопрос, что я хотел бы вызвать метод изменения темы в другом компоненте, но это должно повлиять на все приложение. Как это сделать? Насколько я понимаю, DOCUMENT следует ввести в компонент приложения, если я хочу настроить таргетинг на все приложение.

Спасибо.