2017年6月1日 星期四

Angular2 與 C# WebAPI 一同部署到 IIS 上

花一些時間來撰寫包版筆記,因為中間遇到太多問題,折騰了不少時間呀...

首先,來實作 Angular2 部署到IIS 的部分
Step 1. 使用CMD 到專案根目錄,輸入下面這段,即可將 TypeScript 編譯成 .js 檔
ng build -prod

編譯完成後,在專案的根目錄會出現一個 dist 資料夾,內容如下:












Step 2. 將整個資料夾搬到 IIS 目錄下,並設定IIS
1) 右鍵點選站台 >> 新增網站
2) 站台名稱:輸入站台名稱
3) 實體路徑:選擇剛剛編譯的 dist 資料夾
4) 按下確定即完成部署


作到這個步驟已經完成了 Angular2 的部署了,但如果你有使用到 WebAPI 的話,必須要將WebAPI 與網站部署在一起,否則會有 Failed to load resource: the server responded with a status of 404 (Not Found) 這樣的錯誤出現。接著開始部署 WebAPI 的部分
Step 1. 在IIS 點選剛剛部署好的站台名稱,按右鍵選則新增應用程式
1) 別名:輸入WebAPI名稱
(這個名稱必須要跟Angular2所呼叫的路徑相同,例如前端呼叫的路徑是http://localhost/KyleAPI/api/values,其中KyleAPI就是應用程式的別名,而 api 是預設的route 路徑,values 就是 controller)
2) 實體路徑:選擇 WebAPI 編譯好的資料夾位子
3) 按下確定即完成

最後,部署完的結構如下:





Step 2. 之後,可以在 vs2012 直接發行來更新WebAPI,設定如下:
1) 右鍵點選方案總管的專案名稱,選擇發佈
2) 新增設定檔,並給予一個設定檔的名稱
3) 服務URL:輸入伺服器的IP
4) 網站/發行:輸入IIS部屬的位置,如上例為 test/KyleAPI
5) 使用者名稱/密碼:伺服器的帳密
6) 按下驗證連線,檢查是否連線成功
7) 如果沒有問題,之後即可直接透過發行來進行 WebAPI更新

上面已完成 Angular2 與 C# WebAPI 一同部署到 IIS 上,但實際上,我們還會遇到一些不預期的錯誤。
Issue 1. 因為小太陽的公司裡有些電腦不可以連外網,只能連結內部網路,有些需靠網路的 css 與 js 會有找不到的狀況。如下為 chrome console 所顯示的錯誤訊息:
http://10.56.xxx.xxx/assets/css/bootstrap-theme.min.css.map 404 (Not Found) 
http://10.56.xxx.xxx/assets/css/bootstrap.min.css.map 404 (Not Found) 
檢查了一下Angular2 根目錄的 index.html,發現有些 css 是直接透過外部網路連結
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
解法就是將這些 css 與 js 抓回來,放到 \src\assets\css 與 \src\assets\js 裡面,並更改連結位置,再進行 ng build ,這時我們的 css 與 js 檔都是由 assets 所提供,就算不能連外網也可以正常瀏覽了。

Issue 2. 出現「Uncaught TypeError: Cannot read property 'apply' of undefined」的錯誤,這個錯誤折騰了小太陽很久,因為在網路上找到的討論串,只要將 zone.js 降版到 0.8.5、@angular/core 版本為 4.0.3 就不會出現這樣的錯誤,打開CMD 到專案根目錄輸入下面這兩段,就可以將 zone.js 與 angular/core 安裝為指定版本(連 package.json 也會一併更改)
   npm install @angular/core@4.0.3 --save
   npm install zone.js@0.8.5 --save
但是在公司裡還是有一些電腦會出現錯誤,後來才想到會不會是瀏覽器版本的問題,原來,公司舊電腦 xp/2003 等,所安裝的 chrome 版本是 38.0 版,由於有些 Javascript 函式不足,也會造成上面同樣的錯誤訊息。
之後試著將 Chrome 更新到最新版,卻又碰到另一個錯誤而無法安裝「安裝失敗,系統不支援您的 windows 版本」,原來Google Chrome 已停止支援 Windows XP 和 Windows Vista,而最後的封印版本為 49.0.2623.112 m。
去下載 Google Chrome v49.0.2623.112 Offline Installer (32-bit) 來進行安裝,之後就一切恢復正常了。