如何在 iis 上部署 angular-cli 應用程序

Question

我有簡單的 angular2-cli 應用程序（帶有模型驅動形式的一頁 - 不涉及路由器）。 使用“ng serve”一切正常。 我使用 ng build --product 制作了生產版本。 我將所有 ./dist 文件夾內容復制到 C:\\inetpub\\wwwroot 下的新文件夾中。 我從 IIS 管理控制台制作了虛擬應用程序。 默認應用程序文件是 index.html。 我瀏覽到應用程序 uri，我只得到帶有“正在加載...”的頁面。 我嘗試在沒有 --product 開關的情況下構建（只有 ng build），但結果是一樣的。 Angular 應用程序未加載。 在 IIS 上發布 Angular 應用程序還需要什么嗎？

Answer 1

這是我解決這種情況的方法；

• 使用 angular-cli 創建項目
• 使用ng build構建您的應用程序
• 打開 IIS，創建新的虛擬目錄並顯示dist文件夾
• 將 index.html 中的base href從/為/yourAliasNameOnIIS

• 使用此 web.config 將請求重定向到您的 index.html 頁面

  <system.webServer> <rewrite> <rules> <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" /> <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> </conditions> <action type="Rewrite" url="/yourAliasNameOnIIS" /> </rule> </rules> </rewrite>

• 將您的虛擬目錄轉換為 Web 應用程序

您還可以使用ng build --deploy-url "/yourAliasNameOnIIS"更改dist/index.html src 路徑。

我希望它有幫助！

Answer 2

當您打開瀏覽器的開發工具時，當應用程序嘗試下載 js、css 等文件時，您會看到 404 消息

您需要將 index.html 中的 base href 設置為

<base href="./">

這將確保基本引用與您的網站在 IIS 中的位置相關。 您還需要使用哈希定位策略，否則 IIS 將攔截您的 ng2 路由器 URL 更改並嘗試為該 URL 查找控制器/操作。

在 app.module.ts 的導入下：

RouterModule.forRoot(routerConfig, { useHash: true })

我已經完成了這兩個步驟，並且一切都在帶有 IIS 的 Azure VM 上完美運行。 這樣做也意味着您不必將 SPA 放在根目錄上，並且可以讓多個 SPA 彼此愉快地運行（在 IIS 上的不同網站中）

Answer 3

對我來說，這很簡單：

1. 運行 ng build 命令。 它將生成 dist 文件夾。
2. 在index.html文件中創建href="" 。
3. 將 dist 文件夾路徑提供給 IIS 應用程序，它將起作用。

這樣就更簡單了，不需要修改index.html文件：

ng build -prod --base-href

Answer 4

我提到了很多建議，對我有用的是這個鏈接

這里清楚地描述了為什么需要以不同方式為 Angular 應用程序配置事物的一個很好的解釋。 按照鏈接中的步驟操作，然后我在發布的文件文件夾位置中添加了一個 web.config ，並使用以下設置：

<?xml version="1.0"?>
<configuration>
<system.webServer>  
    <rewrite>
      <rules>
        <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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

上面的鏈接中也描述了這些設置。 希望這有助於某人。

Answer 5

我嘗試了以下方法有效。

1. 在 IIS 中創建新網站（通過 inetmgr）
2. 使用 "ng build --prod" - 生成生產版本代碼
3. 復制 dist 文件夾的文件，然后將其粘貼到 IIS 網站的根文件夾（不要復制文件夾並將其放入 IIS 網站的根文件夾，這會導致問題）
4. 從您的角度設置憑據、授權等。
5. 為“MACHINE_NAME\\IIS_IUSRS & MACHINE_NAME\\NETWORK SERVICE”設置根文件夾的訪問權限
6. 在 IIS 中將默認頁面設置為“index.html”
7. 現在您可以瀏覽網站了。

Answer 6

除了對我最有用的 ulubeyn 答案之外，我還添加了自己的 IIS 重寫規則以啟用：

1) 從 /dist 初始重定向到別名 2) 從別名下載 Javascript 和 3) 別名上的角度路由

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
    <match url="(.*)" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
  </rule>
</rules>

Answer 7

對於那些使用 angular i18n 的人，您必須為每種語言構建應用程序並將它們放在單獨的文件夾中

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

這是 iis 的配置

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>

Answer 8

您可以在沒有任何 Web.config 文件的情況下部署它，如下所示，

---

您可以在 dist 文件夾中找到index.html find base href標簽

現在相應地改變它的路徑

例如 -：如果在 wwwroot 內部署

<base href="/">

例如：如果部署在 wwwroot 的文件夾中

<base href="/FolderName/">

Answer 9

將 web.config 文件添加到位置 app/src/ web.config 的內容：

<?xml version="1.0" encoding="utf-8"?>
<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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

---

在 .angular-cli.json 中將 web.config 添加到 assets 部分，如下所示：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

Answer 10

在 IIS 上，您必須將 web.config 復制到已部署的文件夾中：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <security>
    <requestFiltering>
      <fileExtensions>
        <add fileExtension=".json" allowed="true" />
        <add fileExtension=".woff2" allowed="true" />
      </fileExtensions>
    </requestFiltering>
  </security>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/json" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  <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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

您可以像這樣自動化在 src 中創建 web.config 文件，然后在 .angular-cli.json 上添加它：

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],

Answer 11

對我有用且非常簡單的是首先配置我的路線

RouterModule.forRoot([
--some routes-- 
], { useHash: true })

所以我所有的路線在他們前面都有#然后使用

ng build --base-href "./" --prod 

在 wwwwroot 內的文件夾中構建然后部署我的應用程序。

Answer 12

請按照以下步驟操作：

1. 在命令下運行。 [ng build --prod --base-href='/']
2. 創建一個文件夾，即“D:\\SmartTrader-Angular”
3. 將 dist 內容復制到 D:\\SmartTrader-Angular 文件夾
4. 創建 IIS 站點
5. 無需創建 web.config 文件。
6. 在 IIS 中重新啟動站點。
7. 它現在應該可以工作了。