打包一个支持 i18n 的 Angular 库

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

   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 的分层模块的更多信息：

How to use .forRoot() within feature modules hierarchy