Angular useFactory配置DATE_PIPE_DEFAULT_TIMEZONE报错问题

触发timeZone.replace is not a function错误的核心原因是：Angular 原生依赖注入系统不支持自动解析异步工厂返回的Promise值。
你在useFactory配置中加了async关键字，工厂函数最终返回的是Promise<string>类型对象，而非你预期的字符串'-0400'。当Angular内部的DatePipe读取DATE_PIPE_DEFAULT_TIMEZONE的注入值时，拿到的是一个Promise实例，后续代码对这个值调用字符串专属的replace方法做时区格式处理时，自然会因为对象类型不匹配抛出运行时错误。
而你用useValue: '-0400'配置时，注入器直接把字符串类型的时区值提供给DatePipe，类型完全匹配，所以功能可以正常运行。

• 你的Foo.bar()方法本身就返回Promise，即便去掉工厂函数的async关键字，直接return foo.bar()，最终注入的还是Promise对象，一样会触发相同错误
• Angular的依赖注入流程是同步执行的，不会等待工厂内部的异步操作resolve之后再完成注入，注入动作会在工厂返回值的瞬间完成，不会校验返回值是不是异步对象
• 这个错误和时区值'-0400'本身的合法性没有关系，完全是注入值类型不符合预期导致的

• 方案1（推荐）：借助APP_INITIALIZER在应用启动阶段预加载异步获取的时区值，工厂函数同步返回预加载完成的结果，参考配置如下：

// 全局变量存储预加载完成的时区值
let resolvedTimezone: string;

@Injectable({ providedIn: 'root' })
class Foo {
  bar() {
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve('-0400');
      }, 1000);
    });
  }
}

// 模块内providers配置
providers: [
  // 应用初始化阶段完成异步时区加载，应用会等这个逻辑执行完再启动
  {
    provide: APP_INITIALIZER,
    deps: [Foo],
    useFactory: (foo: Foo) => {
      return async () => {
        resolvedTimezone = await foo.bar();
      };
    },
    multi: true
  },
  // 同步返回已经加载好的时区字符串，注入值类型为string，符合DatePipe要求
  {
    provide: DATE_PIPE_DEFAULT_TIMEZONE,
    useFactory: () => resolvedTimezone
  }
]

• 方案2：如果时区值不需要动态异步拉取，直接使用useValue传入固定时区字符串即可，这也是你已经验证过可用的最简方案
• 方案3：放弃全局配置默认时区，每次使用DatePipe时手动传入时区参数，等异步逻辑拿到时区值后再传给管道，这种方案需要在每个管道调用点重复处理逻辑，不推荐大规模使用

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