Блог

Я пытаюсь использовать свойство документа DOM для удаления и добавления классов в html и управления некоторыми свойствами CSS, но при выполнении ng run app:serve-ssr команды возникает следующая проблема:

Это мой код, это услуга, которая находится в поставщике под названием app-initializer, это поставщик, и именно так он импортируется в AppModule.

 @Injectable({
  providedIn: 'root',
})
export class ThemeService {
 constructor(@Inject(DOCUMENT) private document: Document) {}

 private loadCss(href: string, id: string): Promise<Event> {
    return new Promise((resolve, reject) => {
      const style = this.document.createElement('link');
      style.rel = 'stylesheet';
      style.href = href;
      style.id = id;
      style.onload = resolve;
      style.onerror = reject;
      this.document.head.append(style);
    });
  }
}
 

Поставщик приложений

 import { APP_INITIALIZER } from '@angular/core';
import { ThemeService } from './utils/services';

export const AppInitializerProvider = {
  provide: APP_INITIALIZER,
  useFactory: (themeService: ThemeService) => () => {
    return themeService.loadTheme();
  },
  deps: [ThemeService],
  multi: true,
};
 

Модуль приложения

 // ....
providers: [AppInitializerProvider]
// ....
 

Версия приложения:

1. Угловой интерфейс командной строки: 11.2.7
2. Узел: 14.16.0
3. Угловой: 11.2.8
4. Тестирование в Google Chrome и Microsoft Edge

Попробуйте использовать appendChild вместо этого, append возможно, не поддерживается на стороне сервера DOM

 this.document.head.appendChild(style);
 

Вы также можете использовать Renderer2 , что рекомендуется при работе с элементами DOM из углового

 this.renderer.appendChild(this.document.head, style);