在跨 Angular 微前端和 Webpack 模块联盟的独立组件中使用 TraslateService

Question

在使用独立组件的 Webpack Module Federation 的 Angualar 应用程序中跨微前端使用 TraslateService (ngx-translate) 的最佳方式是什么？

我在微前端公开的每个模块中导入 TranslateModule.forChild() ，但我不能再公开独立组件而不是旧的 Angular 模块了。

Answer 1

要解决在具有独立组件和 @angular-architects/native-federation 的微前端中使用 @ngx-translate/core 的问题，请按照以下步骤操作：

在微前端中为 TranslateModule 创建自定义模块：不要在每个独立组件中使用 TranslateModule.forRoot()，而是创建一个名为 CustomTranslateModule 的模块：

import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AuthTranslateLoader } from '../../../assets/i18n/AuthTranslateLoader';

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: AuthTranslateLoader,
      },
    }),
  ],
  exports: [TranslateModule],
})
export class CustomTranslateModule {}

定义自定义加载器：使用自定义加载器直接管理来自 JSON 文件的翻译。

import { TranslateLoader } from '@ngx-translate/core';
import { Observable, of } from 'rxjs';
import esJson from './es.json';
import enJson from './en.json';

export class AuthTranslateLoader implements TranslateLoader {
  public getTranslation(lang: string): Observable<any> {
    return lang === 'en' ? of(enJson) : of(esJson);
  }
}

在独立组件中导入 CustomTranslateModule：在每个需要翻译的独立组件中，导入 CustomTranslateModule：

import { Component } from '@angular/core';
import { CustomTranslateModule } from '../../shared/modules/CustomTranslateModule';
import { ReactiveFormsModule } from '@angular/forms';
import { LbButtonComponent, LbCardModule, LbInputComponent } from 'lb';

@Component({
  selector: 'app-sigin',
  standalone: true,
  imports: [
    LbInputComponent,
    LbCardModule,
    ReactiveFormsModule,
    CustomTranslateModule,
    LbButtonComponent,
  ],
  templateUrl: './sigin.component.html',
  styleUrls: ['./sigin.component.scss'],
})
export class SiginComponent {
  // Your component logic here
}