[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. 

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

Suppliment

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

2016-12-05-16_31_37-pc0238v-vs2015-vmware-workstation

 <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

About C.H. Ling 262 Articles
a .net / Java developer from Hong Kong and currently located in United Kingdom. Thanks for Google because it solve many technical problems so I build this blog as return. Besides coding and trying advance technology, hiking and traveling is other favorite to me, so I will write down something what I see and what I feel during it. Happy reading!!!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.