Angular 使用i18n支持打包Angle库

Angular的很好，像这样的工具使组件库打包非常容易，但是它们可以组合吗

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

如果有人能给我指点医生那就太好了。

---

谢谢

当您使用CLI（使用

ng xi18n

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

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

为了在构建时静态地包含文件，只需在代码中使用

setTranslations

，如文档中所述。然后，您可以将您的翻译与代码捆绑在一起

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

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

等），并允许创建自定义翻译加载程序

现在，您只需要实现将使用配置的加载器工厂或类！这是我的（我使用POs进行翻译）：

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

要使用整个解决方案，无论您在何处使用主库模块或此翻译模块，都可以调用

TranslateModule.forRoot（/*此处的配置*/）

。如果这不是导出的主模块，请在此处详细介绍如何使用带有

forRoot

的分层模块：

---

这是正确的。但是还有另一种方法可以定义组件库中的翻译，这就是一些ng元素的工作方式，比如ng引导。它会根据服务器区域设置配置切换区域设置语言。您如何解决此警告“output.globals中没有为外部模块“@ngx translate/i18n polyfill”提供名称–猜测“i18nPolyfill”？我试图将它添加到路径中，但它不起作用。如果我将它添加到umdModuleIds列表中的ng-package.json中，它就会消失，但这是正确的使用方法吗。也许这是一个新的话题，但我想你可能已经解决了。但是如果我想把我图书馆的官方译文也一起分发呢？我该怎么做呢？我还没有开始准备我的库以供分发，一旦我到了那个阶段，我可能会想出一些东西。我会记住这里的帖子，虽然我不确定它是否会很快出现：）也对这个感兴趣。还没有发现任何关于使用角度库分发翻译的信息。我现在面临着同样的问题。你找到解决办法了吗？我找到了一个简单的解决办法！在打包库时，我们是否仍应使用

Angular 7.2

中的

ng packagr

工具？

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