如何使用i18n正确地将一个有角度的6应用程序构建成baseHref的“地区目录”？
我正在努力使我的应用程序以多种语言可用，我遵循的是角的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.)
没有使用baseHref-parameter，所以我不能简单地将构建移动到子目录中，比如/dist/myapp/fr。
为了更清楚地说明，在运行build之后，我想要一个如下所示的文件夹结构：
/dist/myapp/en
/dist/myapp/fr
/dist/myapp/es当myapp是我的webroot时，应该可以在浏览器中访问这些路由：
/en
/fr
/es3.)
最后，lang-attribute ist没有正确设置。index.html未更改，将始终显示：
<html lang="en">而不是<html lang="es">或<html lang="fr">。
要使这一工作正确进行，缺少什么？
回答 1
Stack Overflow用户
发布于 2018-10-22 14:36:49
在进行构建时，需要传递正确的配置。否则，它将只使用production配置
实际上，您需要为每种语言进行一次构建。
ng build --configuration=fr
ng build --configuration=en
ng build --configuration=es您可以为每个配置指定要使用的选项(aot、输出散列、.)或者您可以将其放入build中的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);
}
}https://stackoverflow.com/questions/52818850
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号