[Angular] Angular與dotnet core整合-2

鑒於上次面試，有人說整合怎麼沒有放程式碼

所以這次就來把完整的流程寫一次

並附上github連結

建置所需工具

nodejs

dotnet core sdk 2

angular-cli

本篇先不解釋安裝方法

建議IDE : visual studio code

使用Angular CLI 新增Angular專案 以及dotnet CLI新增Web API專案

開啟命令提示字元(cmd 或 powershell 或 cmder)

先到預計放專案的目錄

輸入指令 新增Angular 專案(後面參數為使用router以及使用scss作為預設樣式)

ng new dotnetcore-angular-integrate --routing true --style scss

輸入指令 進入專案資料夾 →新增 dotnet core 的 Web API

cd dotnetcore-angular-integrate
dotnet new webapi

此時專案結構會是這樣

專案結構

到這個階段 Angular跟 Web API 都可以獨立運行

測試Angular

ng serve

編譯成功

在網頁上正常運作

測試Web API

dotnet run

編譯成功

網頁測試API正常

修改程式碼整合前後端程式

將Angular編譯後的檔案放到Web API的網頁目錄

修改.angular-cli.json outDir改成wwwroot (此為預設值)

修改Angular的輸出目錄

此時 由於dotnet Web API 預設沒有開放使用者讀取網站內的檔案 所以要開放使用者使用靜態檔案(像是css js html等)

修改Startup.cs

修改Web API 使其可以使用預設檔案跟靜態檔案

此時 編譯過的Angular專案已經可以在dotnet core上面運作了 但是還沒有撰寫呼叫Web API的程式

新增 src/app/app.service.ts 在此呼叫Web API

app.service.ts

修改src/app/app.module.ts 在此增加剛撰寫的service以及引用HttpClient

app.module.ts

修改呼叫的src/app/app.component.ts 在此呼叫剛撰寫的AppService

app.component.ts

修改呼叫後顯示的頁面src/app/app.component.html

app.component.html

輸入以下指令

ng build
dotnet run

至瀏覽器輸入localhost:5000 看結果如下

預覽結果

到此階段 已經成功的整合了Angular以及dotnet core Web API

最佳化開發環境

目前的情況 每次撰寫完前端 都必須重新輸入

ng build

來重新編譯一次

不過ng build 後面有個參數叫做-watch 只要輸入

ng build -w

這樣就可以修改完之後 立刻編譯到指令目錄啦!

再來的問題是 後端的Web API寫完之後

dotnet 也不會自動偵測 並且重編

所以也會像前端那樣 改完一次就要輸一次指令

那 dotnet 也有 watch的指令嗎?

當然有

只是要另外安裝元件

修改dotnetcore-angular-integrate.csproj

dotnetcore-angular-integrate.csproj

輸入指令

dotnet restore

這樣就會還原所有的套件 會也把剛剛加入的dotnet watcher加入進專案中

此時再輸入

dotnet watch run

後端就可以即時編譯了

附註:前後端需要各開一個 cmd去執行

發行專案

發行專案跟一開始的建置差不多的流程

輸入

ng build — prod
dotnet publish -c Release

就可以把把前後端的專案發行至bin/Release了

整理

將剛剛會用到的指令整理到package.json

package.json

dev-front為前端建置監看

dev-back為後端建置監看

publish為發行專案

修改.gitignore

加入不用上git的資料夾

.gitignore

參考文章