Angular动态设置styleUrls报需为字符串数组错误如何解决

Angular 编译器在首次冷启动构建时，会对@Component装饰器内的元数据做静态分析，styleUrls字段仅接受纯字面量字符串组成的数组，不支持在数组内写require()调用、字符串拼接等动态逻辑，因此冷启动阶段会直接抛出「Expected "styleUrls" to be an array of String」错误。
热重载时初始编译流程已经走完，Webpack可以识别动态require的路径匹配规则，因此页面能正常运行，但TS层面的类型报错不会消失。安装@types/node仅能解决TS对require语法的识别问题，完全绕不开Angular编译器对styleUrls的静态校验规则，所以之前的修复方案无效。

• 方案1：官方推荐稳定写法（无编译兼容问题）
  不动态切样式文件路径，将两个样式文件全部引入，通过根节点条件class做样式隔离，适配所有Angular版本，不会触发任何编译报错：

  1. 修改组件装饰器配置，全量引入两个样式文件：

  @Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styleUrls: ['./some-thing.component.scss', './some-thing-new.component.scss']
  })
  

  2. 组件类中暴露环境判断变量：

  export class SomeThingComponent {
    isNewStyle = environment.booleanCondition;
  }
  

  3. 模板根节点绑定条件class：

  <div [class.new-theme]="isNewStyle">
    <!-- 原有组件模板内容 -->
  </div>
  

  4. 把some-thing-new.component.scss内的所有样式全部包裹在.new-theme命名空间下，避免和旧样式冲突即可。

• 方案2：最小改动适配动态引入（保留原有单文件加载逻辑）
  把动态逻辑移到装饰器外层，用styles字段替代styleUrls接收预解析完成的样式字符串，绕开静态路径校验：

  1. 首先在项目src/typings.d.ts文件中补充SCSS模块类型声明，解决模块识别报错：

  declare module '*.scss' {
    const styleStr: string;
    export default styleStr;
  }
  

  2. 修改组件代码，把动态require逻辑放到装饰器外层，样式传给styles字段：

  import { Component } from '@angular/core';
  import { environment } from 'src/environments/environment';
  
  // 动态逻辑放到装饰器外层，编译阶段会先执行这部分求值
  const styleSuffix = environment.booleanCondition ? '-new' : '';
  const compStyle = require(`./some-thing${styleSuffix}.component.scss`).default;
  
  @Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styles: [compStyle] // styles字段支持接收动态求值后的样式字符串，无静态校验限制
  })
  export class SomeThingComponent {}
  

  改完后重启ng serve，冷启动和热重载都不会再抛错。

永远不要在styleUrls、templateUrl这两个字段里写任何动态表达式、变量、函数调用，AOT编译模式下这两个字段只支持纯字面量字符串值，没有例外。所有动态样式、模板逻辑，要么通过class/指令切换实现，要么提前在装饰器外层求值后传给styles、template字段。

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