如何让A2应用强制使用M1模块的ngx-translate语言文件而非自身文件？

这个问题我之前帮开发者处理过，核心在于ngx-translate默认使用全局TranslateService实例，当M1被A2引用后会复用A2的服务配置，导致加载A2的语言文件。要强制M1使用自身的语言文件，我们需要给M1模块配置独立的翻译隔离环境，具体步骤如下：

1. 在M1中配置隔离的TranslateModule #

在M1的模块文件中，不要使用TranslateModule.forRoot()（这会覆盖全局配置），而是使用TranslateModule.forChild()并开启isolate模式，同时自定义加载器指向M1的语言文件路径：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

// 自定义M1专属的翻译加载器，指向M1自身的语言文件目录
export function M1TranslateLoader(http: HttpClient) {
  // 假设M1的语言文件在打包后会被放到A2的assets/m1/i18n路径下
  return new TranslateHttpLoader(http, './assets/m1/i18n/', '.json');
}

@NgModule({
  declarations: [/* 这里放M1的组件、指令等 */],
  imports: [
    CommonModule,
    TranslateModule.forChild({
      // 配置专属加载器
      loader: {
        provide: TranslateLoader,
        useFactory: M1TranslateLoader,
        deps: [HttpClient]
      },
      // 开启隔离模式：M1会拥有独立的TranslateService实例，不与A2全局服务共享
      isolate: true
    })
  ],
  exports: [/* 导出M1的组件和TranslateModule，方便A2使用 */]
})
export class M1Module { }

2. 配置ng-packagr打包M1的语言文件 #

要确保M1的语言文件能被正确打包并复制到A2项目中，需要修改M1的ng-package.json，添加assets配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/m1",
  "assets": [
    // 指定M1项目中语言文件的源路径，打包后会被包含到库中
    "./src/assets/i18n"
  ],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

当A2安装M1库后，这些语言文件会被自动复制到A2的assets/m1/i18n目录下，和我们在加载器中配置的路径对应。

3. 关键原理说明 #

• isolate: true：开启这个属性后，M1模块会创建一个独立的TranslateService实例，完全独立于A2的全局翻译服务，不会共享翻译缓存、语言设置等状态。
• 自定义加载器：通过指定专属的TranslateHttpLoader路径，确保M1加载的是自身的语言文件，而非A2的默认路径。

这样配置后，当A2引用M1模块时，M1的组件会使用自己独立的翻译服务，加载M1提供的语言文件，不会受到A2全局翻译配置的影响。

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