在 IIS 執行 Angular 13 專案並解決 404 錯誤

安裝 node.js

https://nodejs.org，下載 16.14.2 版

執行 node-v16.14.2-x64.msi，一直按下一步

中間步驟略，最終會顯示完成

開啟令命提示字元，執行 node -v，即可查看版本

安裝 IIS Rewrite 2.0 

開啟網站，點右邊的從組件庫安裝應用程式

在右上角的搜尋框，輸入 URL 進行搜尋

找到 URL Rewrite 2.0 後，按下新增，在按安裝

按我接受

等待安裝

安裝完成

檢視網站內的應用程式，會看到 URL Rewrite

如果沒看到可以將 IIS 整個關閉再重新打開

開啟 angular 專案

執行 ng build 指令

將 dist 資料夾內的資料複製到 IIS 網站的目錄下

在網站目錄下新增 web.config

可參考 https://angular.tw/guide/deployment

<?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>

如果沒有新增 web.config，瀏覽網頁時會出現 404 錯誤

HTTP 錯誤 404.0 - Not Found 
您尋找的資源已移除、名稱已變更，或暫時無法使用。