Angular 16动态CSS加载异常：初始渲染时导航栏不显示

正在将个人作品集网站从AngularJS迁移至Angular 16，核心功能之一是通过下拉菜单动态切换CSS文件。新网站接近完成，但遇到初始加载异常：

• 编写的脚本可正常切换CSS并设置默认样式，但初始加载时顶部导航栏完全不可见（控制台显示元素存在，但位置和可见性异常）
• 切换CSS后导航栏显示正常，切回默认样式也无问题，仅首次加载出现异常

同时观察到新旧网站切换CSS的差异：旧网站切换时会短暂空白后显示新样式，新网站切换时会先显示无CSS状态的页面，推测是Angular提前渲染导致CSS加载滞后，进而引发初始加载导航栏无样式的问题。

已尝试的解决方案及效果 #

• 将默认CSS添加至angular.json：初始加载显示正常，但切换CSS后默认样式残留，干扰导航区域
• 将默认样式表添加至app.component.ts/app-navigation.ts的styleUrls：与上述情况一致
• 在index.html中添加默认样式的link标签：要么默认样式残留，要么完全无法加载CSS
• 在app.component.ts/app-navigation.ts的constructor或ngOnInit()中加载样式，也在app.header.ts中尝试：功能正常，但初始加载时导航栏先于CSS渲染，导致加载完成前不可见

相关代码 #

app.component.ts #

import { Component, Inject, OnInit } from '@angular/core';
import { ViewEncapsulation, HostListener, ElementRef } from '@angular/core';
import { trigger, state, style, animate, transition} from '@angular/animations';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('BTTfade', [
      state('false', style({ opacity: 0 })),
      state('true', style({ opacity: 1 })),
      transition('false => true', animate('500ms ease-in')),
      transition('true => false', animate('500ms ease-out'))
    ]),
  ]
})

export class AppComponent implements OnInit {
  offset = 320;
  duration = 300;
  fadeIn = false;

  constructor(private el: ElementRef, @Inject(DOCUMENT) private document: Document) {
    this.loadStyle('default');
  }

  ngOnInit(): void {
//    this.loadStyle('default');
  }

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

    let themeLink = this.document.getElementById(
      'theme-link'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = `assets/css/style-${styleName}.css`;
    } else {
      const style = this.document.createElement('link');
      style.id = 'theme-link';
      style.rel = 'stylesheet';
      style.type = 'text/css';
      style.href = `assets/css/style-${styleName}.css`;

      head.appendChild(style);
    }
  }

  @HostListener('window:scroll',['$event'])      
  onScroll(e) {

    if (window.scrollY > this.offset) {
      this.fadeIn = true;
    }
    else {
      this.fadeIn = false;
    }
  }

  goToTop(){
    let element = this.el.nativeElement.querySelector('#mainPage')
    element.scrollIntoView();
  }

}

app.component.html #

<div id="main-body">

  <app-header></app-header> 

  <div id="wrapper">

      <router-outlet></router-outlet>

      <a (click)="goToTop()" class="back-to-top" [@BTTfade]="fadeIn">Back to Top</a> 

  </div> <!-- end main content -->

  <br clear="all" />

  <app-footer></app-footer>

</div>  

解决方案：使用APP_INITIALIZER预加载默认CSS #

APP_INITIALIZER可以在Angular应用初始化前执行指定逻辑，确保CSS加载完成后再渲染页面，解决初始加载样式滞后问题。实现步骤如下：

1. 创建样式加载服务，封装loadStyle逻辑：

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

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

  loadStyle(styleName: string): Promise<void> {
    return new Promise((resolve, reject) => {
      const head = this.document.getElementsByTagName('head')[0];
      let themeLink = this.document.getElementById('theme-link') as HTMLLinkElement;

      if (themeLink) {
        themeLink.href = `assets/css/style-${styleName}.css`;
        themeLink.onload = () => resolve();
        themeLink.onerror = () => reject(new Error(`Failed to load style ${styleName}`));
      } else {
        const style = this.document.createElement('link');
        style.id = 'theme-link';
        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = `assets/css/style-${styleName}.css`;
        style.onload = () => resolve();
        style.onerror = () => reject(new Error(`Failed to load style ${styleName}`));
        head.appendChild(style);
      }
    });
  }
}

2. 在app.module.ts中配置APP_INITIALIZER：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StyleLoaderService } from './style-loader.service';
import { AppComponent } from './app.component';

// 定义初始化函数
export function initializeApp(styleLoader: StyleLoaderService) {
  return () => styleLoader.loadStyle('default');
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    StyleLoaderService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [StyleLoaderService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 修改AppComponent，移除constructor中的loadStyle调用：

// 注释或删除这一行
// this.loadStyle('default');

这样配置后，Angular会等待默认CSS加载完成后再初始化应用，避免初始渲染时无样式的问题。同时保持动态切换CSS的功能正常，不会出现默认样式残留的情况。

内容的提问来源于stack exchange，提问作者Reverend Bubbles