Angular 5 在运行时使用 Angular CLI 加载语言环境

Question

Angular 5 提供了一种在运行时使用 registerLocaleData

加载 i18n locale 的方法

https://angular.io/guide/i18n#i18n-pipes

我想根据设置动态加载语言环境（例如存储在 localStorage 中）。我的第一个测试是加载单个语言环境 (fr)：

import(`@angular/common/locales/fr`).then(locale => {
    registerLocaleData(locale.default);
});

这很好用。

根据存储在 localStorage 中的值加载时，如下所示：

const localeName = localStorage.getItem('locale') || 'en';

import(`@angular/common/locales/${localeName}`).then(locale => {
    registerLocaleData(locale.default);
});

也可以，locale加载成功。使用 Angular CLI 构建项目时，由于在构建时它不知道要捆绑哪个语言环境，所以它会捆绑所有语言环境，这很好。唯一的问题是构建过程会针对它加载的每个区域设置发出警告：

Module build failed: Error: node_modules\@angular\common\locales\af-NA.d.ts is not part of the compilation output. Please check the other error messages for details.

WARNING in ./node_modules/@angular/common/locales/af-NA.js.map Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type.

我已经尝试包含区域设置 *.ts 文件并排除 *.map 文件，但它似乎没有接收到它们。

这是我的tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../node_modules/@angular/common/locales/**/*.map"
  ],
  "include": [
    "**/*",
    "../node_modules/@angular/common/locales/**/*.ts"
  ]
}

TypeScript 需要 esnext 作为模块才能使动态导入工作。使用 es2015 它不起作用

Answer 1

仅导入 *.js 文件似乎可以解决问题，如下所示：

import(`@angular/common/locales/${localeName}.js`).then(locale => {
   registerLocaleData(locale.default); 
});

无需包含或排除 tsconfig.app.json

中的文件

Angular 5 在运行时使用 Angular CLI 加载语言环境

Angular 5 loading locale at runtime with Angular CLI

localization

typescript

angular-cli

angular

angular5