使用Visual Studio Code開發Angular 2專案

Angular 2於9/13推出RC7,許多人還在懷疑該不會一直到RC18吧?說時遲那時快,Angular 2 Team忽然在兩天後中秋節這天,閃電宣佈Angular 2.0進入正式版!

身為開發老兵,近年已鮮少加入Beta、Tech Preview版先鋒部隊拓荒,習慣等正式版再認真以待,一則避免發展早期規格一變再變白走冤枉路,二則愈晚開始,規格、工具愈成熟,參考資源也愈多。雖依黑暗技術守則第15條:「早學搶先機,晚學撿便宜」,但NG2已成為工作專案的正式選項,只能乖乖面對新挑戰,看開發教學配月餅文旦,正式步上NG2學習之路。

Angular 2官網有個Angular 2 Quick Start 教學,其中有個My First Angular 2 App範例,算是新手村第一站,決定以它為對象,練習從無到有建立一個NG2專案。

初步評估,現階段Visual Studio Code對NG2開發的支援較VS2015成熟完整,是IDE的首選。加上體驗過用VSCode 偵錯node.js,也算有一丁點基礎(其實只有0.5公分高吧 Orz),就決定是它了!

在網路上找到一段VSCode Angular2 First App Example 影片教學,一步步跟著做,踩了一些雷,總算有驚無險在VS Code完成我第一個NG2專案。影片一鏡到底,從無到有建立網站進行測試,講得很完整,但NG2及VSCode在影片錄製之後有些小改變,另外開發環境差異可能導致錯誤,故我還是做了重點整理,提供想用VSCode開發NG2的捧油參考。

  1. 開始前請先安裝node.jsVisual Studio Code
  2. 建一個FirstApp空白資料夾
  3. 使用VSCode開啟資料夾
  4. 在VSCode加入package.json等檔案

    NG2教學網站的原始碼旁邊有個Copy Code按鈕,可省下選取及按Ctrl-C的步驟,請多加利用。
  5. 依序加入package.json、tsconfig.json、typings.json、systemjs.config.js(最後一個是js不是json哦)。
  6. 開啟DOS視窗,執行npm install,npm會依package.json列舉清單,下載所需的套件:

    npm套件安裝完成後,FirstApp目錄下會多出node_modules及typings資料夾:
  7. 在FirstApp建立app資料夾,並app資料夾中新増app.module.ts、app.component.ts、main.ts並貼入內容。(app.module.ts在範例有出現兩次,第二次多加入AppComponent才是最終版本)
  8. 在FirstApp建立index.html、styles.css並貼入內容。
  9. 設定啟動作業,依下圖操作並選取Node.js:

    VSCode會建立.vs/launch.json,其中program要改成"${workspaceRoot}/node_modules/lite-server/bin/lite-server",利用內建的簡易Web Server進行測試:
  10. 接著我們要指定tsc進行編譯,開啟「檢視/命令選擇區」:

    在命令清單中找到「工作:設定工作執行器」。由於項目蠻多的,可在最上方輸入關鍵字快速過濾:

    選擇「TypeScript-tscofig.json 編譯TypeScript專案」
  11. 如果一切順利,按下Ctrl-Shift-B或用命令選擇器找到「Task: Run Build Task」,app目錄應該會出現app.module.js與app.module.js.map…等編譯結果
  12. 按下F5執行,見證奇蹟的時刻,第一支NG2程式測試成功~

重點來了,以上宛如行雲流水,背後我卻撞牆流血,花了好大功夫才搞懂並解決tsc版本問題。我遇到的狀況是ts沒被編譯成js,VSCode看不到任何訊息,後來我找到tasks.json有個"showOutput"選項,預設為"slient",導致tsc即使編譯TypeScript出錯也不會顯示錯誤。

將參數調整為"always"後,得知無法編譯TypeScript是因為 error TS5023: Unknown compiler option 'p'.  錯誤,爬文得知這是tsc版本不對造成,再費了好大力氣,搞懂幾件事:

  1. tsconfig.json是新版tsc提供的功能,如果你的tsc版本太舊,就會出現error TS5023: Unknown compiler option 'p'. 
    VSCode理應使用npm下載的tsc,會出錯多半是因為PATH殘留1.5以前版本TypeScript路徑所致,因新版已不需在PATH設定路徑,故請將其刪除(請刪除,不要改指向新版),詳情可參考保哥的文章
  2. 記用npm install -g typescript在node.js環境安裝TypeScript編譯元件
  3. tsc有兩種!上述PATH路徑放在C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.x\的是tsc.exe,C:\Users\User\AppData\Roaming\npm下的則是tsc.cmd,以JavaScript寫成,依附於node.js執行,二個是不同的東西。tsc.exe目前已經到了1.8.34,而tsc.cmd還在1.8.10,二者行為也有別。例如我就發現tsc.cmd編譯時會自動省略node_modules,故tsconfig.json不需要透過exclude排除,加了反而會有錯誤。而實測發現,NG2官網範例專案使用tsc.exe –p .方式執行,ts不會被編譯也不會有錯誤訊息,故建議將PATH中tsc.exe的路徑移除,並確認node.js的tsc元件安裝妥當。
  4. 如何檢查方法tsc版?在CMD視窗下執行where tsc及tsc -v,確認其路徑為AppData\Roaming\npm,且版本為1.8.10

就這樣,我完成了VSCode NG2首航!祝大家NG2 Coding不NG~

歡迎推文分享:
Published 16 September 2016 10:22 AM 由 Jeffrey
Filed under: ,
Views: 22,968



意見

# bonder chou said on 19 September, 2016 01:53 AM

幫補充若遇到PROXY問題的,的npm install會不過,需要新增一個.typingsrc檔,內容為

proxy=http://proxy.example.com:8080

就可以安裝成功了

# Jeffrey said on 19 September, 2016 05:03 PM

to bonder chou, 感謝補充,已筆記。

# 四百龍銀 said on 26 September, 2016 01:29 AM

按下Ctrl-Shift-B或用命令選擇器找到

若無更改預設值 則是Ctrl + Alt + P

# 四百龍銀 said on 26 September, 2016 02:01 AM

更正 Bulid的快速鍵是Ctrl Alt B 沒錯

Ctrl + shift + p = Show All Commands

附上VS code Key Bindings 自我掌嘴100下

code.visualstudio.com/.../keybindings

# Jeffrey said on 26 September, 2016 11:52 PM

to 四百龍銀,謝謝補充快捷鍵表。噗,更正錯誤要掌嘴也太嚴重了,依此標準,以我錯字跟搞烏龍的記錄早晚會被一丈紅… (抖)此風不可長,此風不可長!

# txb said on 10 May, 2017 02:59 AM

雖然這篇文已經去年的了,但是今天還是幫到我,不過菜鳥的我想問下,為什麼直接設定program到lite-server就可以了呢?不用單獨的去npm run server之類的?

# Jeffrey said on 11 May, 2017 11:43 PM

to txb, 測試NG2時需要一台Web Server,lite-server是NG社群偏好的輕巧版Web Server,理論上你也可以換用其他Web Server,但lite-server的資源應是最多的。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<September 2016>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication