使用i18n支持打包Angular库

Question

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

如果我想打包和分发一个含有可翻译组件的组件库，是否可能？我应该如何打包这样的库？翻译文件会随包一起发布，还是应该在主要应用程序中定义？

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

- leonixyz

---

我现在也面临着同样的问题。 你找到解决方案了吗？ - Beejee

这是我找到的一个简单解决方案！https://dev59.com/K1EG5IYBdhLWcg3wf_rV#67824442 - Ion Prodan

Answer 1

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

- R3N0

---

没错。但是还有另一种方法，您可以在组件库中定义翻译，就像某些ng元素所做的那样，例如ng bootstrap。它会根据服务器语言环境配置切换本地化语言。 - Jonathan Ramos

你是如何解决这个警告"No name was provided for external module '@ngx-translate/i18n-polyfill' in output.globals – guessing 'i18nPolyfill'"的？我已经尝试将其添加到路径中，但不起作用。如果我将其添加到ng-package.json的umdModuleIds列表中，则警告会消失，但这是正确使用它的方式吗？也许这是一个新话题，但我认为你可能已经解决了它。 - Janne Harju

如果我想要将我的库与官方翻译一起分发，该怎么做？我应该采取什么方式？ - waterplea

我还没有开始为我的库做分发的准备，一旦我到了那个阶段，我可能会想出一些东西。会记住在这里发布，虽然我不确定这会是很快的事情 :) - waterplea

也对此很感兴趣。还没有找到有关在Angular库中分发翻译的任何信息。 - dude

@waterplea，你找到解决方法了吗？ - Max

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);
}

请记得在模块中使用的每个类和函数都要导出，这是 Ahead-of-Time 编译的先决条件（默认情况下，库是用 AOT 构建的）。

要使用整个解决方案，无论您在使用主库模块还是翻译模块时，只需调用 TranslateModule.forRoot(/* 在此处填写您的配置 */)。如果这不是导出的主模块，则可以了解有关在层次化模块中使用 forRoot 的更多信息，请参阅链接：

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

- SzybkiSasza

---

在打包库时，我们是否仍应该在Angular 7.2中使用ng-packagr工具？ - Stephane

问题不是关于ngx-translate。 - OZ_