如何在支持 i18n 的 Microsoft IIS 上部署 Angular 10 应用程序答案

【问题标题】：how to deploy angular 10 app on Microsoft IIS with i18n support如何在支持 i18n 的 Microsoft IIS 上部署 Angular 10 应用程序
【发布时间】：2020-09-04 16:56:39
【问题描述】：

我正在开发一个支持 i18n 的 Angular 10 应用程序，我想在 Microsoft IIS 上部署此应用程序，法语版本为 https://example.com/admin/fr，英语版本为 https://example.com/admin/en-US

在文件“index.html”中，我设置了：在文件“angular.json”中，我添加了：

  "i18n": {
    "sourceLocale": "en-US",
    "locales": {
      "fr": {
        "translation": "src/locale/messages.fr.xlf"
      }
    }
  },

在环境文件中，我添加了：baseHref: '/admin'

当我在文件“angular.json”中使用选项：“localize”：[“fr”] 进行编译时，我在位于 https://localhost:4200/admin 的开发服务器上获得了一个正常工作的法语应用程序

当我在文件“angular.json”中使用选项：“localize”：[“en-US”] 进行编译时，我在位于 https://localhost:4200/admin 的开发服务器上获得了一个工作英语应用程序

我已阅读 https://angular.io/guide/i18n#deploy-locales 和 https://angular.io/guide/deployment#server-configuration 的 Angular 文档，了解如何在 IIS 上进行生产部署。

我已经设置了上面提到的重写规则，在文件“angular.json”中设置了“localize”：true 以在一个构建中获取所有本地化应用程序，并且，当我在 Windows 上的 MyEclipse 中开发时，我运行构建使用命令： MSYS_NO_PATHCONV=1 node_modules/.bin/ng build --prod --base-href "/admin/"

“fr”和“en-US”文件夹在“dist”文件夹中生成良好，我将它们复制到我的 IIS 网站的“admin”文件夹下。

当我转到https://example.com/admin/fr 时，我在浏览器控制台中收到此错误：错误：无法匹配任何路由。网址段：“fr”

当我转到https://example.com/admin/en-US 时，我在浏览器控制台中收到相同的错误：错误：无法匹配任何路由。 URL 段：'en-US'

我在 Angular 文档中或通过谷歌搜索几个小时都没有找到任何有价值的信息来解决这个问题，因此非常感谢任何帮助。

【问题讨论】：

你可以尝试设置iis URL重写规则：<rule name="AngularJS Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/admin/" /> </rule>
当我部署未本地化的 Angular 应用程序时，我已经使用了这个重写规则，它工作正常。不幸的是，它不适用于本地化的应用程序。
你可以参考这个链接：stackoverflow.com/a/49898662
我找到了这个解决方案，但只有当您的应用程序部署在您网站的根文件夹下时才可以，而不是部署在子文件夹下，这是我需要的。我花了一些时间来寻找如何在 Angular 中配置基本 href 并在 IIS 中重写规则，这就是为什么我发布了如何做到这一点以使其工作。

标签： angular iis internationalization

【解决方案1】：

我终于做到了，所以如果其他人有同样的问题，这是我的解决方案。

在 Angular 文件“index.html”中：

<base href="/myapp">

Angular 环境文件中没有“baseHref”参数。

在 Angular 文件 « angular.json » 中：

      "i18n": {
    "sourceLocale": "en",
    "locales": {        
      "fr": {
        "translation": "src/locale/messages.fr.xlf"
      }
    }
  },
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "localize": true,

在 Windows 10 上使用 MyEclipse 一次为所有语言环境构建 Angular 应用程序：

MSYS_NO_PATHCONV=1 node_modules/.bin/ng build --prod --baseHref="/myapp"

文件夹“dist/en”和“dist/fr”随新版本更新。

在 IIS 中：

创建一个指向本地文件夹的虚拟目录“myapp”。这不是强制性的，您也可以简单地使用位于目标网站根文件夹下的“myapp”文件夹。

使用以下规则在目标网站的根文件夹中添加“web.config”文件

             <rule name="Angular Routes EN" stopProcessing="true">
             <match url="myapp\/en.*" />
             <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="myapp/en" />
         </rule>
         <rule name="Angular Routes FR" stopProcessing="true">
             <match url="myapp\/fr.*" />
             <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
             </conditions>
             <action type="Rewrite" url="myapp/fr" />
         </rule>

然后您的 Angular 应用程序可以使用：

https://myexample.com/myapp/en 用于 EN 版本 https://myexample.com/myapp/fr FR 版

【讨论】：

如果您的问题得到解决，我请求您将有用的建议标记为答案。这将帮助面临同样问题的其他人。

【解决方案2】：

我尝试了第一个解决方案，但没有成功。我找到了另一个解决方案：我的应用将是 IIS 服务器上唯一的应用。

在 Angular 文件“index.html”中：

<base href="/">

一次性为所有语言环境构建 Angular 应用程序：

ng build --prod

文件夹“dist/en”和“dist/fr”随新版本更新。

在 IIS 中：将“en”和“fr”文件夹从 dist 复制到 wwwroot（IIS 根文件夹）。在“wwwroot/en”中创建一个名为 web.config 的文件。将以下代码放入其中：

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/en/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

对“/fr”文件夹做同样的事情。小心把“/en/”改成“/fr/:

您可以在 wwwroot 文件夹中添加 index.html。根据用户在其浏览器中设置的语言，浏览器将被重定向到两个文件夹之一。英文是默认的。

<html>
<head>
<script>
    let userLang = navigator.language || navigator.userLanguage; 
    console.log('userLang:' + userLang);
    if (userLang != null && typeof userLang !== undefined && userLang.includes('fr')) {
        userLang = 'fr';
    } else {
        userLang = 'en';
    }
    window.location.href = window.location.href + '/' + userLang;
</script>
</head>
</html>

为了确保一切正常，转到 wwwroot/en/index.html 并检查基本 href 是这样定义的。

<base href="/en/">

对法语版本 wwwroot/fr/index.html 执行相同操作。应该是

<base href="/fr/">

我的 angular.json 是这样的：

        "i18n": {
        "sourceLocale": "en",
        "locales": {
          "en": {
            "translation": "src/locale/messages.en.xlf",
            "baseHref": "/en/"
          },
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": "/fr/"
          }
        }
      },
        ...
        "en": {
          "localize": ["en"]
        },
        "fr": {
          "localize": ["fr"]
        }
        ...
        "en": {
          "browserTarget": "web-order-portal:build:en"
        },
        "fr": {
          "browserTarget": "web-order-portal:build:fr"
        }
        ...
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "web-order-portal:build"
          }
        },

更新：您可以使用 post hooks 自动复制 /dist/en 和 /dist/fr 文件夹中所需的文件（index.html 和 web.config）：继续 package.json 文件并添加以下代码：

"build": "ng build --prod",
"postbuild": "copy src\\locale\\dist\\index.html dist\\ /Y && copy src\\locale\\dist\\en\\web.config dist\\en /Y && copy src\\locale\\dist\\fr\\web.config dist\\fr /Y",

【讨论】：