# 如何將 Angular 含有路由機制的 SPA 網頁應用程式部署到 IIS 網站伺服器

這幾個月以來，我們一直在利用 Angular 2 建構一個還不算小的入口網站，網站前端用的是 Angular 2 框架，後端用的是 ASP.NET Web API 2 框架，還好有 Angular 2 這樣一個優雅又完整的框架，讓我們整個前端團隊不分資深或資淺，大家都可以順利分工合作。如今網站即將上線，進入了要部署的時間點，原本在 Angular CLI 提供的開發伺服器上，程式都跑得好好的，但部署到 IIS 卻發生了網址路由的問題，除了首頁以外的頁面都會顯示 HTTP 404 Not Found 的錯誤，這該如何是好呢？本文告訴你如何解決！

### 第一種：不碰觸任何 IIS 設定的做法

這種做法最簡單，直接修改你的 Angular 2 路由模組定義，將路由改用 [useHash](https://angular.io/docs/ts/latest/guide/router.html#!#-hashlocationstrategy-) 的方式執行即可，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/58204024520934a9cf00-image_3013.png)

### 第二種：套用 URL Rewrite 自動網址重寫

首先，你必須先透過 [Web Platform Installer](https://www.microsoft.com/web/downloads/platform.aspx) 安裝 [URL Rewrite 2.0](https://www.iis.net/downloads/microsoft/url-rewrite) 模組。

如果你的 IIS 只有很單純的安裝 Angular 2 網站，我已經寫好了一個 [web.config](https://gist.githubusercontent.com/doggy8088/68eed089b53ff50e81314ba47d92e87a/raw/5e1b874aaea15c791a0f1929cb3a42f9eefafdb7/web.config) 檔案，只要將該檔案複製到 IIS 網站根目錄即可。

> ```
> <?xml version="1.0" encoding="UTF-8"?>
> <configuration>
>   <system.webServer>
>     <rewrite>
>       <rules>
>         <rule name="SPA" stopProcessing="true">
>           <match url=".*" />
>           <action type="Rewrite" url="/" />
>           <conditions>
>             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
>           </conditions>
>         </rule>
>       </rules>
>     </rewrite>
>   </system.webServer>
> </configuration>
> ```

如果你想透過 IIS 管理員進行設定，也可以參照以下設定：

1.  開啟 IIS 管理員，展開你的 Angular 2 站台，滑鼠雙擊 URL Rewrite 設定：  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c5dad6f836c4a45b942b-image_3014.png)  
      
    
2.  新增規則  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ddb96d1ec18880c3458c-SNAGHTML17c78b41.png)  
      
    
3.  新增空白規則  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/8000be68a87b406496c2-image_3015.png)  
      
    
4.  編輯輸入規格，請如下圖依序輸入完全一樣的設定，然後在下一步設定「**條件**」  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/206d79e907945a218290-image_3016.png)  
      
    
5.  新增條件  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c8679b0efcb73bee683a-image_3017.png)  
    請設定「**不是檔案**」  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a4818478480d4a4606e2-image_3018.png)  
    這裡的條件，最主要是要告訴 URL Rewrite 當用戶端要求的網頁在伺服器端找不到檔案時，自動改寫網址為 **/** 路徑。  
      
    
6.  最後按下「套用」即可  
    [![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/de425cd40d6e4a777efc-image_thumb_225.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a3fbf138fea4635377c0-image_3019.png)  
      
    

### 第三種：同時部署 ASP.NET Web API 與 Angular 2 在同一站台的情況

上一種設定方式，最終會幫你在網站根目錄自動建立一個 web.config 設定檔，如果你的 Angular 2 已經跟你的 ASP.NET Web API 或 ASP.NET MVC 專案整合部署在同一個站台下的話，上述步驟則會自動幫你修改**現有的 web.config 設定**，但是上述設定會讓你的 ASP.NET Web API 完全無法使用，因為 ASP.NET MVC 與 ASP.NET Web API 本身就擁有 Routing 機制，URL Rewrite 模組的執行順序比 ASP.NET 的路由模組還早執行，URL Rewrite 的設定會大大影響著所有 ASP.NET 的路由設定。因此，你必須將 ASP.NET Web API 的 API 網址排除在 URL Rewrite 的設定之外，才可以讓 ASP.NET Web API 與 Angular 2 無縫接軌，這樣才能同時讓 Angular 2 與 ASP.NET Web API 在同一個 IIS 站台下運作！

假設你的 ASP.NET Web API 路由都設定在 **/api/** 路徑下，那麼請修改我們在上一步所做的「**條件**」設定，新增一筆規則，將「**條件輸入**」設定為 **{PATH\_INFO}**，將「**檢查輸入字串是否為**」設定為「**不符合模式**」，並在「**模式**」設定為 **api/.\*** 即可 (設定**模式**時，請不要加上斜線開頭)。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b80c73a1b6e8bd4fa08e-image_3020.png)

設定完後的條件示意圖如下：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f1a6a335cf45f5cd0d6b-image_3021.png)

**相關連結**

-   [Angular - PathLocationStrategy](https://angular.io/api/common/PathLocationStrategy)
-   [URL Rewrite : The Official Microsoft IIS Site](https://www.iis.net/downloads/microsoft/url-rewrite)
-   [Routing & Navigation - ts - GUIDE](https://angular.io/docs/ts/latest/guide/router.html)
-   [分享一個在 Windows 10 安裝 URL Rewrite 2.0 模組的方法](https://www.facebook.com/will.fans/posts/1550259458336526)