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

我正在开发一个支持i18n的Angular 10应用程序，我想在上以法语和英语在Microsoft IIS上部署此应用程序

在文件“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

我已经阅读了位于和的Angular文档，以了解如何在IIS上进行生产部署

如前所述，我已经设置了重写规则，在文件“angular.json”中设置“localize”：true以在一个版本中获得所有本地化的应用程序，并且，当我在Windows上的MyEclipse中开发时，我使用以下命令运行该版本： MSYS_NO_PATHCONV=1节点_modules/.bin/ng build--prod--base href”/admin/“

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

当我转到时，在浏览器控制台中出现以下错误：错误：无法匹配任何路由。URL段：“fr”

当我转到时，我在浏览器控制台中遇到相同的错误：错误：无法匹配任何路由。URL段：“en US”

---

我没有在Angular doc或通过谷歌搜索几个小时来找到任何有价值的信息来解决这个问题，所以我非常感谢您的帮助。

最后我做到了，所以如果其他人也有同样的问题，这里是我的解决方案

在角度文件“index.html”中：

要在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>         
  

  
  对于英文版
  对于FR版本
  我终于做到了，所以如果其他人也有同样的问题，这里是我的解决方案
  
  在角度文件“index.html”中：
  
  要在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>         
  
  
  对于英文版
  对于FR版本，我尝试了第一种解决方案，但没有成功。
  我找到了另一个解决方案：
  我的应用程序将是IIS服务器上唯一的应用程序
  
  在角度文件“index.html”中：
  
  文件夹“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>
  
  更新：
  您可以使用post挂钩自动复制/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",
  
  我尝试了第一种解决方案，但没有成功。
  我找到了另一个解决方案：
  我的应用程序将是IIS服务器上唯一的应用程序
  
  在角度文件“index.html”中：
  
  文件夹“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>
  
  更新：
  您可以使用post挂钩自动复制/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",
  
  您可以尝试设置iis URL重写规则：
  在部署未本地化的Angular应用程序时，我已经使用了此重写规则，并且工作正常。不幸的是，它不适用于本地化的应用程序。您可以参考此链接：我已经找到了此解决方案，但只有当您的应用程序部署在网站的根文件夹下时，它才可以，如果您部署在子文件夹下，则不可以，这正是我所需要的。我花了一些时间来了解如何在Angular中配置base href并在IIS中重写规则，这就是我发布如何使其工作的原因。您可以尝试设置iis URL重写规则：
  我在部署未本地化的Angular应用程序时已使用此重写规则，并且工作正常。不幸的是，它不适用于本地化的应用程序。您可以参考此链接：我已经找到了此解决方案，但只有当您的应用程序部署在网站的根文件夹下时，它才可以，如果您部署在子文件夹下，则不可以，这正是我所需要的。我花了一些时间来了解如何在Angular中配置base href，以及如何在IIS中重写规则，这就是为什么我发布了如何做到这一点的原因。如果您的问题得到解决，那么我请求您将有用的建议标记为答案。这将有助于其他面临同样问题的人。如果你的问题得到解决，那么我请求你将有用的建议标记为答案。这将帮助其他面临同样问题的人。
  <base href="/en/">
  
  <base href="/fr/">
  
          "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"
            }
          },
  
  "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",