AngularCLI生产构建导致字典注入失效问题

嘿，这个问题我之前也碰到过！核心原因就是Angular CLI生产构建的**tree shaking（摇树优化）**在作祟——它会自动移除它认为"未被使用"的死代码，而你的COLL1_TRANSLATIONS常量大概率被误判成无用代码给删掉了。下面给你几个靠谱的解决办法：

方案1：防止常量被tree shaking误删 #

把你的常量声明和赋值拆分，让构建工具知道这部分代码需要保留：

1. 先在一个文件里声明类型：

// translation-types.ts
export declare const COLL1_TRANSLATIONS: Record<string, string>;

2. 再在另一个文件里赋值：

// coll1-translations.ts
import { COLL1_TRANSLATIONS } from './translation-types';

// 用类型断言绕过类型检查，确保赋值生效
(COLL1_TRANSLATIONS as any) = {
  "Key1": "Value1",
  "Key2": "Value2..."
};

3. 在需要使用的地方，直接导入COLL1_TRANSLATIONS即可，这样构建工具就不会把它当成死代码移除了。

方案2：改用依赖注入的翻译服务（推荐） #

这更符合Angular的最佳实践，也能彻底避免tree shaking的问题：

// translation.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 全局单例服务
})
export class TranslationService {
  // 直接把翻译对象放在服务里
  public coll1Translations = {
    "Key1": "Value1",
    "Key2": "Value2..."
  };
}

然后在组件里注入使用：

import { Component } from '@angular/core';
import { TranslationService } from './translation.service';

@Component({...})
export class YourComponent {
  constructor(private translationService: TranslationService) {}

  getTranslation(key: string) {
    return this.translationService.coll1Translations[key];
  }
}

因为服务是通过依赖注入被主动引用的，生产构建时绝对不会被优化掉。

方案3：临时禁用优化（仅用于调试） #

如果你只是想快速验证是不是tree shaking的问题，可以临时关闭生产构建的优化（不要用于线上环境，会导致包体积暴涨）：
打开angular.json，找到你项目的build配置，修改production环境的参数：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "optimization": false,
            "buildOptimizer": false
          }
        }
      }
    }
  }
}

运行ng build --prod后如果翻译正常，就坐实了是tree shaking的问题，再改用前两个方案解决。

另外补充一句：如果你是靠环境变量切换翻译内容，记得把翻译对象放在environment.prod.ts里，通过environment对象引用——Angular会正确替换环境文件，而且不会把它当成死代码处理。

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