[ASP.net] 如何建立Blank ASP.net Angular Project

有時工作上, 要建立一堆project 處理, 通常都見到會有一份document 用作標準作業流程(Standard Operation Procedure, SOP), 但為了減少人為錯誤及節省時間. 通常會建立一個template 當作懶人包.

今次工作上要用Angular 做front-end, 無須使用ASP.net MVC project 中大部份功能, 以精簡front-end 作大前提下, 便直接用此作示範如何建立一個project template.

於Angular Github 中下載QuickStart Source, 它打包了最基本的component, 若有需要, 之後可以透過修改package.json 或npm command 安裝需要的package; 有關修改 package.json, npm / git command, 之後再補上.
開啟Visual Studio 並建立一個新的Project, 選擇ASP.NET Applicaiton (.NET Framework). 在示範中, 命名為Poc.Angular,並按OK.
為了令Front-end 更簡潔, 在選擇Template 中選取Empty, 剔除Add unit tests 及Host in the cloud 後, 按OK.
當project 建立好後, 於File Explorer 中開啟, 並將之前下載的zip file 內容於到project 內;
回到Visual Studio, 於Solution Explorer 中選取Show all file, refresh page 後會見到新加入的檔案. 選取後右鍵並選擇Include In Project.
選取package.json, 按右鍵並選擇Restore Package, 之後便會開始下載package.json 內有dependence 的package 和相對應版本;
開啟tsconfig.json, 設定compileOnSave 為true. 當TypeScript file 有修改並儲存後, TypeScript MSBuild 便會重新編譯 (Compile) 一次TypeScript 作JavaScript;
開啟app/app.component.ts, 拍一下空白再儲存, 這動作是誘發TypeScript compile.
選取Debug->Start Debuging, 執行一次, 確定無問題.
順利的話, Visual Studio 會進入debug mode 並開啟瀏覽器, 見到Hello Angular, 代表一切正常.
停止執行後, 開啟File->Export Template
在Export Template Wizard 中選擇Project Template, 然後按Next.
輸入有關資料後, 按Finish.
Project Template 便會export 作zip file. 有關如何修改Project Template 的教學, 再後補.
以後建立新project 時, 便可以從Installed Template 找到自建的Project Template.

Suppliment

若果在compile 時見到這個error message, 那主要是VS 2015 Update 3 和TypeScript 的相容性問題, 最快的workaround 是開啟TypeScript 的Target file 並commented 以下的內容.

 <VsTsc
      ToolPath="$(TscToolPath)"
      ToolExe="$(TscToolExe)"
      TSConfigFile="%(ConfigFiles.Identity)"
      YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
      ProjectDir="$(TypeScriptProjectDir)"
      ToolsVersion="$(TypeScriptToolsVersion)"
      TypeScriptCompileBlocked="$(TypeScriptCompileBlocked)"
      ComputeOutputOnly="false"
      OutputLogFile="$(CompilerOutputLog)">

      <Output TaskParameter="GeneratedJavascript" ItemName="emittedFiles" />
    </VsTsc>

Reference