Angular12基于Angular Material动态懒加载自定义主题报错如何解决？

问题根因 #

1. Angular Material 会在应用初始化阶段就校验核心主题是否存在，你在app.component.ts构造函数中触发主题加载，时机晚于校验时机，因此即使后续主题加载成功，也会触发核心主题缺失的报错。
2. 全局styles.scss中引入mat-core()后自定义主题失效，是因为样式优先级问题：全局样式先加载，动态主题的样式权重不够被全局样式覆盖。
3. 主题加载路径在生产环境可能存在404问题，也会导致样式失效。

具体解决步骤 #

1. 调整全局styles.scss配置 #

保留全局的mat-core()引入，仅保留核心结构样式，不要加任何Material主题色相关配置：

@use '@angular/material' as mat;
@include mat.core();
// 仅放全局通用的非主题类样式

这一步保证Material组件的基础结构样式正常，不会出现布局错乱。

2. 用APP_INITIALIZER提前加载主题，匹配校验时机 #

在app.module.ts中添加初始化逻辑，保证主题在Angular Material初始化之前就加载完成：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ThemeService } from './theme.service';

// 初始化加载主题的工厂函数
export function themeInitializer(themeService: ThemeService) {
  return () => {
    // 根据当前域名判断要加载的主题，可根据自己的业务规则调整
    const domain = window.location.hostname;
    let theme = 'windy';
    if (domain.includes('car')) theme = 'windy-car';
    else if (domain.includes('shop')) theme = 'windy-shop';
    
    themeService.setTheme(theme);
    // 极端场景下可加短延时确保样式加载完成，非必须
    return new Promise(resolve => setTimeout(resolve, 50));
  };
}

@NgModule({
  // 其他原有配置保持不变
  providers: [
    StyleManagerService,
    ThemeService,
    {
      provide: APP_INITIALIZER,
      useFactory: themeInitializer,
      deps: [ThemeService],
      multi: true
    }
  ]
})
export class AppModule { }

完成后删除app.component.ts构造函数中的主题调用逻辑，避免重复加载。

3. 修正主题加载路径，保证优先级 #

• 调整theme.service.ts的路径拼接逻辑，避免生产环境子目录部署时路径404：

setTheme(themeToSet: string) {
  // 可根据自己的deployUrl配置调整路径规则
  const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
  this.styleManager.setStyle(
    "theme",
    `${baseHref}${themeToSet}.css`
  );
}

• 确认style-manager-service.ts中动态创建的link标签是插入到document.head的末尾，确保主题样式优先级高于全局样式，原有逻辑已经符合要求，无需修改。

4. 关闭主题校验（可选） #

如果调整完加载时机后仍然有核心主题缺失的警告，可以直接关闭Angular Material的样式校验，适合动态加载主题的场景：
修改main.ts：

import { MAT_CHECK_STYLES } from '@angular/material/core';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: MAT_CHECK_STYLES, useValue: false }
  ]
})
.catch(err => console.error(err));

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