gpt4 book ai didi

angular - 如何使用 baseHref 将带有 i18n 的 Angular 6 应用程序正确构建为 "locale directories"?

转载 作者:太空狗 更新时间:2023-10-29 17:14:42 25 4
gpt4 key购买 nike

我正在努力使我的应用程序支持多种语言,并且我正在关注 Angular 的 i18n guide .默认区域设置为 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/frdist/myapp/es .

2.)
baseHref -parameter 未使用,所以我不能简单地将构建移动到子目录中,例如 /dist/myapp/fr .

为了更清楚,在运行 build 之后我想要这样的文件夹结构:

/dist/myapp/en
/dist/myapp/fr
/dist/myapp/es

myapp是我的webroot,应该可以在浏览器中访问这些路由:

/en
/fr
/es

3.)
最后 lang - 属性设置不正确。 index.html不改变,an会一直显示:

<html lang="en">

而不是 <html lang="es"><html lang="fr"> .


使这项工作正常进行还缺少什么?

最佳答案

构建时需要传递正确的配置。否则,它只会使用 production 配置

您实际上需要为每种语言进行一次构建。

ng build --configuration=fr
ng build --configuration=en
ng build --configuration=es

您可以为每个配置指定要使用的选项(aot、输出哈希...),或者您可以将其放在 build 中的 options 设置中

  "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 issue ,你必须手动完成

export class AppComponent {
constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
renderer.setAttribute(doc.documentElement, 'lang', locale);
}
}

关于angular - 如何使用 baseHref 将带有 i18n 的 Angular 6 应用程序正确构建为 "locale directories"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52818850/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com