angular - 打包一个支持 i18n 的 Angular 库

Question

Angular 的i18n很棒，像ng-packagr这样的工具让组件库打包变得非常容易，但是它们可以结合起来吗？

如果我想打包和分发具有可翻译组件的组件库怎么办？可能吗？如何打包这样的库？翻译文件会与软件包一起提供，还是应该在主应用程序中定义？

如果有人能指点我一些文档，那就太好了。谢谢

score 7 · Accepted Answer

当您使用 CLI（带有ng xi18n）为主应用程序生成翻译文件时，库中具有 i18n 属性的元素将导入翻译文件中。然后，您可以在主应用程序中定义翻译。

score 1 · Accepted Answer

有两种方法可以做到这一点 - 静态提供资产并在构建时捆绑或在运行时配置翻译路径。

为了在构建时静态包含文件，您只需setTranslations在代码中使用，如https://github.com/ngx-translate/core文档中所述。然后，您可以将翻译与代码捆绑在一起。

最好让消费者知道该使用什么。为了能够正确地提供翻译文件的路径（假设标准结构，其中每个翻译都驻留在名称中包含语言的单独文件中），您可以执行以下操作：

interface TranslationsConfig {
  prefix: string;
  suffix: string;
}

export const TRANSLATIONS_CONFIG = new InjectionToken('TRANSLATIONS_CONFIG');

@NgModule({
  declarations: [],
  imports: [
    NgxTranslateModule,
  ],
  exports: [
    NgxTranslateModule,
  ]
})
export class TranslateModule {
  public static forRoot(config: TranslationsConfig): ModuleWithProviders {
    return {
      ngModule: TranslateModule,
      providers: [
        {
          provide: TRANSLATIONS_CONFIG,
          useValue: config
        },
        ...NgxTranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient, TRANSLATIONS_CONFIG]
        }
      }).providers
    ],
  };
}

}

此代码确保在构建库时，AOT 将能够解析类型（因此InjectionToken等）并允许创建自定义翻译加载器。

现在只能由您来实现将使用配置的加载器工厂或类！这是我的（我使用 PO 进行翻译）：

export function HttpLoaderFactory(http: HttpClient, config: TranslationsConfig) {
  return new TranslatePoHttpLoader(http, config.prefix, config.suffix);
}

请记住导出您在模块中使用的每个类和函数，因为这是 AOT 的先决条件（默认情况下，库是使用 AOT 构建的）。

要使用整个解决方案，无论您使用主库模块或此翻译模块，您只需调用TranslateModule.forRoot(/* Your config here */). 如果这不是导出的主模块，请在forRoot此处使用分层模块的更多信息：

如何在功能模块层次结构中使用 .forRoot()

angular - 打包一个支持 i18n 的 Angular 库

2 回答 2

Related

Reference