部署到 Azure 后，在 Angular 7 中使用 i18n 进行本地化不起作用答案

【问题标题】：Localization using i18n in angular 7 is not working after deployment to Azure部署到 Azure 后，在 Angular 7 中使用 i18n 进行本地化不起作用
【发布时间】：2019-11-27 07:09:05
【问题描述】：

我正在关注 link 以使用 i18n 在 Angular 中实现本地化。

当我导航到“url/en”或“url/fr”时，它不是指向相应的目录文件夹，而是尝试搜索路由并给出以下错误消息。

core.js:15723 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'fr'

我使用 VS2019 创建了这个 Angular 7 项目。对于后端，我使用的是 asp.net core 2.2 web api。

运行以下命令会在本地显示具有正确翻译的页面。

ng 服务 --configuration=fr

我的 angular.json 文件如下图所示。

我的Package.json文件如下图

我已经在 app.modules.ts 中这样配置了路由

RouterModule.forRoot([
  {
    path:'',      
    component:HomeComponent,
    canActivate:[AuthGuard]
  },

我用这种方式修改了.csproj文件。

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-locale" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-locale:ssr" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

这是我的目录结构

【问题讨论】：

标签： .net-core internationalization angular7 angular-i18n angular7-router

【解决方案1】：

看起来您应该覆盖 Web 服务器级别的 url。例如添加 web.config：

    <rule name="FR Rule" stopProcessing="true">
      <match url="(fr/)" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/fr/" />
    </rule>

【讨论】：