最近因公司新專案要求，決定使用 Angular 6 ，經過一番努力終於成功把 Angular 6 成功的加入 C# 專案中，接著以為可以很順利的把 Angular 6 加入 Teamcity CI 中 ，卻意外的也花了不少時間，所以就把安裝設定的流程筆記下來，也供大家參考
Step 1.
要使用Angular 2 以上，必須先在本機安裝 node js 以及 typescript ，相對的我們也需要在TeamCity的Server上安裝，以下提供載點
- TypeScript : https://www.typescriptlang.org/
- Node JS : https://nodejs.org/en/
Step 2.
接著開始在 TeamCity 上設定 Auto Build ，這個部分原本打算用比較偷懶的方式，直接把Angular 6 的 node_modules 加入專案中並且 Push 到 Git Server上面，可是檔案真的太大了，過程中一直不太順利，所以後來還是決定在 TeamCity Build 之前 ，再去Install node_modules ，所以這一個部分我們需要再 TeamCity 的 Build Step 加上一段Command 的指令
- Runner type : Command Line
- Working directory : 選擇Web專案的目錄
- Command script : npm install 他會去讀取Web專案下的package.json並安裝angular 的 module
Step 4.
接著再加一個Build Step 用來Build Project以及Publish to IIS
這段的詳細設定可以參考之前的文章 ：
Step 5.
到這一步基本上已經完成設定了，但是因為我沒有把node_modules加入專案中
在.csproj的專案檔中就不會去產生node_modules，所以相對的TeamCity在Publish時也不會把 node_modules Publish 到我們 IIS Web 的目錄下，這時候在瀏覽器開啟網頁時就會發現少了很多JS檔案 ，接著下一個步驟我們就要來解決這個問題
Step 6.
如果沒有把node_modules 加入專案中，在Publish時就不會被複製到 IIS Web 目錄下，所以這邊的解決方式是在 Publish 的設定檔中，加入一段設定，跟 MSBuild Tools 説哪一個資料夾也要Publish 上去
- 開啟Publish設定檔
- 在<Project>前面加入以下設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<Target Name="CustomCollectFiles"> <ItemGroup> <_CustomFiles Include="node_modules\**\*" /> <FilesForPackagingFromProject Include="%(_CustomFiles.Identity)"> <DestinationRelativePath>node_modules\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath> </FilesForPackagingFromProject> </ItemGroup> </Target> <PropertyGroup> <CopyAllFilesToSingleFolderForPackageDependsOn> CustomCollectFiles; $(CopyAllFilesToSingleFolderForPackageDependsOn); </CopyAllFilesToSingleFolderForPackageDependsOn> <CopyAllFilesToSingleFolderForMsdeployDependsOn> CustomCollectFiles; $(CopyAllFilesToSingleFolderForMsdeployDependsOn); </CopyAllFilesToSingleFolderForMsdeployDependsOn> </PropertyGroup> |
接著就可以把這一段直接Push到 Git Server上面，等 TeamCity Run 完之後就會發現node_modules已經成功的被複製到IIS中了
以上就是Angular 6與 TeamCity 整合的簡單筆記，有什麼疑問也歡迎各位前輩提出來一起討論，謝謝～