lam*_*ade 8 locale internationalization angular angular6
我正在尝试以多种语言提供我的应用程序,而且我正在关注Angular的i18n指南.默认语言环境是en-US,还有法语fr和西班牙语es翻译.
这在使用ng serve --configuration=fr例如运行应用程序时工作正常.
现在我就到了,我想要构建应用程序.我正在使用此命令:
ng build --prod --build-optimizer --i18n-file src/locale/messages.es.xlf --i18n-format xlf --i18n-locale es
我也angular.json像指南中解释的那样进行了更新:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"es": {
"aot": true,
"outputPath": "dist/myapp/es",
"baseHref": "/es/",
"i18nFile": "src/locale/messages.es.xlf",
"i18nFormat": "xlf",
"i18nLocale": "es",
"i18nMissingTranslation": "error"
},
"fr": {
"aot": true,
"outputPath": "dist/myapp/fr",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error"
}
}
},
构建过程有效,我得到了应用程序的翻译版本.
不幸的是,有些事情不起作用:
1)
应用程序是始终建成dist/myapp,而不是在dist/myapp/fr或dist/myapp/es.
2.)
- baseHrefparameter未被使用,所以我不能简单地将构建移动到子目录中,例如/dist/myapp/fr.
为了更清楚,运行后build我想要一个像这样的文件夹结构:
/dist/myapp/en
/dist/myapp/fr
/dist/myapp/es
什么时候myapp我的webroot,应该可以在浏览器中访问这些路由:
/en
/fr
/es
3.)
最后,lang-attribute没有正确设置.index.html没有改变,总会显示:
<html lang="en">
而不是<html lang="es">或 <html lang="fr">.
缺少什么使这项工作正常？
在进行构建时,您需要传递正确的配置.否则,它只会使用production配置
你实际上需要为每种语言做一个构建.
ng build --configuration=fr
ng build --configuration=en
ng build --configuration=es
您可以为每个配置指定要使用的选项(aot,输出散列,......),或者您可以将其options放在build
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
至于更改lang属性,根据这个github问题,你必须手动完成
export class AppComponent {
constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
renderer.setAttribute(doc.documentElement, 'lang', locale);
}
}
| 归档时间： |
|
| 查看次数： |
1924 次 |
| 最近记录： |