我正在用其他语言生成各种版本的应用程序 . 我正在使用AOT(提前)编译,所以我最终得到的静态可部署站点的结构如下所示:
dist -
index.html -- entry file for the default (English language) app
-fr
index.html -- entry file for French language version
-de
index.html -- entry file for German language version
我现在可以使用下拉菜单在主要语言网站之间切换,用户可以选择他们的首选语言,然后我使用纯JavaScript加载所需网站的主条目文件,如下所示:
const baseUrl = window.location.origin;
window.location.href = baseUrl + '/' + requestedLanguage + '/index.html'; // e.g. requestedLanguage = 'fr'
这是有效的,因为看起来请求实际的 index.html
文件意味着Angular不会将请求 href
解释为Angular路由 .
我想要发生的是,当用户输入已包含路径中的语言版本的URL时,我希望提供该语言版本 . 我还希望保留URL路径,以便Angular路由为所请求的URL加载适当的组件 .
例如:
-
用户输入
myDomain.com/fr/myPage
-
加载了
/fr/
子目录下的应用程序,该应用程序中的Angular路由加载MyPage
的相关组件
目前,如果我输入一个URL myDomain.com/fr/myPage
,Angular路由会尝试将所需的子文件夹 fr
解释为一条不存在的路由,因此我收到以下错误:
Error: Cannot match any routes. URL Segment: 'fr/instruments'
如何加载所需的应用程序和正确的组件?必须有一种方法让Angular认识到URL中的 fr
指向不同的应用程序 . 也许我'm missing a build configuration or something? Here'我的脚本在 package.json
用于构建法语版本:
"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
3 回答
只需使用Components而不是使用不同的单独应用程序,并使用以下示例>
然后你可以通过URL直接访问页面
对英语,法语和丹麦语的不同路径使用角度
router
概念 .然后使用基于语言的路径 .
我能够通过为我的.NET后端配置管道来加载不同语言版本的应用程序,以便为每个不同的语言应用程序加载Angular静态索引页面(在代码中称为“SPA”) . 它的工作原理是检查请求网址中是否存在第一个子文件夹的“index.html”页面(例如'/ fr /','/ de /'),如果存在则加载该页面:
Startup.cs
然后将URL的其余部分(语言子文件夹之后的部分)解释为已加载的应用程序内的路由(例如,法语应用程序) . 这意味着为应用程序加载了正确的组件(我不完全确定这部分是如何工作的 - 可能路径的其余部分落到.NET请求管道的不同部分并传递给Angular应用程序? )