如何为Angular的dev/test/prod环境配置Material Design主题

当然可以实现，下面提供两种适配你现有配置结构的常用方案：

方案一：通过angular.json的configurations直接配置 #

Angular的build配置允许在configurations中覆盖options里的styles数组，你可以为每个环境指定专属的Material预构建主题：

修改你的angular.json，在prod、test等环境配置中添加styles字段，替换默认主题：

"projects": {
  "stammdaten": {
    // ... 其他原有配置
    "architect": {
      "build": {
        "options": {
          // ... 默认styles配置
          "styles": [
            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
            "src/styles.css"
          ]
        },
        "configurations": {
          "prod": {
            // ... 现有prod配置
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            // 添加prod专属主题
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "outputHashing": "all"
          },
          "test": {
            // ... 现有test配置
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
              }
            ],
            // 添加test专属主题
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
              "src/styles.css"
            ]
          },
          // 若dev环境需单独配置，可添加对应configuration
          "dev": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.dev.ts"
              }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

这种方式优势在于构建时直接替换主题，无需额外代码逻辑，适合使用预构建主题的场景。

方案二：通过environment文件动态加载主题 #

如果需要更灵活的主题控制（比如使用自定义主题而非预构建主题），可以结合environment.*.ts文件实现动态加载：

1. 在各环境文件中定义主题路径
   在environment.ts、environment.prod.ts、environment.test.ts中添加主题配置：

// environment.ts (dev环境)
export const environment = {
  production: false,
  apiPort: 3000,
  materialTheme: './node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiPort: 8080,
  materialTheme: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css'
};

// environment.test.ts
export const environment = {
  production: false,
  apiPort: 3001,
  materialTheme: './node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css'
};

2. 移除angular.json中默认的主题引用
   修改angular.json的styles数组，去掉预构建主题的默认配置：

"styles": [
  "src/styles.css"
]

3. 在应用初始化时动态加载主题
   在main.ts或者app.component.ts中添加主题加载逻辑：

import { environment } from './environments/environment';

// 动态加载主题函数
function loadMaterialTheme() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = environment.materialTheme;
  document.head.appendChild(link);
}

// 应用启动前加载主题
loadMaterialTheme();

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这种方式适合需要动态切换主题、或者使用自定义SCSS主题的场景，主题路径可根据环境灵活配置。

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