整合 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 了。

 

有問題嗎?歡迎一起討論喔!