Angular 5 提供了一种在运行时加载 i18n 语言环境的方法注册区域设置数据
https://angular.io/guide/i18n#i18n-pipes 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 不起作用