Question

Angular 5提供了一种使用 registerLocaleData

在运行时加载i18n语言环境的方法

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

它也有效，并且语言环境已成功加载。使用Angular CLI构建项目时，因为在构建时它不知道要捆绑哪个区域设置，所以它将所有区域设置捆绑在一起，这很好。唯一的问题是构建过程会为它加载的每个语言环境发出警告：

模块构建失败：错误：   node_modules \ @angular \ common \ locales \ af-NA.d.ts不属于   编译输出。有关详细信息，请查看其他错误消息。

警告在./node_modules/@angular/common/locales/af-NA.js.map   模块解析失败：意外的令牌（1:10）   您可能需要适当的加载程序来处理此文件类型。

我已经尝试包含语言环境* .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 CLI

1 个答案: