整合 Asp.net Core & Angular Cli 混合開發模式

Angular Cli 可以說是目前使用 Angular 2 以上的開發主要啟動方案。透過簡單的命令頁可以快速依據設定加入 component 的內容，降低維護基本的 import 項目的複雜度。可以參考：基本的 Angular Cli 說明。

但對於使用 aps.net core 開發的人員而言，以下說明如何將 angular cli 整合到專案內，同時可以獲得兩者的便利性。

• 首先，在專案目錄下執行 ng new（如果不知道 angular cli command 請參閱上面的說明連結），執行完畢後會產生 angular cli 預設的 source code folder：

這裡包含完整的啟動程式架構，可以透過瀏覽 index.html 進行操作。

• 將產生的檔案移動到 Asp.net Core 的專案下。要複製兩種內容：

angular 執行程式：指定 angular source code 放入到 任意的指定目錄下（例如：ClientApp\ ），這裡的 source code 就是指 src\ 目錄下的所有內容：

angular cli 的組態設定檔案：就是指跟 src\ 目錄平行的檔案，複製到專案的根目錄下（與 Startup.cs 平行的路徑）：

• 修改變更路徑後的 angular cli 相關組態設定

tsconfig.json 用來編譯 typescript to javascript，修改：

1. outDir 改為 asp.net wwwroot： “outDir”: “./wwwroot/clientapp/out-tsc”

2. include 改為前面所設定的程式目錄（例如： ClientApp\）

修改 angular-cli.json，同樣將 outDir 改為 wwwroot 目錄

完成相關設定後，就可以在專案目錄下執行 angular cli 了。