要想在WebStorm裡建立Angular2項目，前提是需要安裝angular-cli的。使用npm安裝angular-cli的方法《使用 angular-cli 建立angular2 項目》。
1.在webstorm中建立一個angular cli項目，如下圖所示。
第一個框中輸入項目的路徑和名字
第二個選的是nodeJs安裝的位置
第三個是Angular-cli的檔案夾位置,我是安裝在了全局global中，是以在選擇這個檔案夾的時候是全局中的angular-cli檔案夾。
三個填完之後點選Create就能建立項目了,項目建立的很慢.等待項目出現的node_module檔案夾後說明項目建立完成。
就這樣，最簡單的angular2工程建立好了；
工程結構熟悉一下：angular-cli.json 是angular-cli的配置檔案，測試配置檔案karma.conf.js，typescript的lint配置檔案，端到端的測試配置檔案protractor.conf.js，導入es6子產品的
配置檔案polyfills.ts，angular工程的main.ts引導啟動檔案，全局樣式style.css，typescript配置檔案ts.config.json;typescript的聲明檔案typings.d.ts,以及生成了最賤的的一個
angular組建 app.components相關的css，html，ts。這些配置都是angular2的生産項目中需要配置的檔案，angular-cli幫我們做了這麼多事情，而我們隻用了一個指令；
2.啟動項目
在webstorm左下角找到npm，輕按兩下start即可啟動項目；或者在webstorm下方Terminal視窗下執行指令ng serve也可以啟動項目。
嘗試的修改了下app.component.ts中的文字，看看熱部署是否馬上生效？yes！it does！
3.嘗試建立module，component,service,class
1>.建立一個home的component
在webstorm下方Terminal視窗下執行指令
ng g component home
這時 app下面多了一個home的component，它應有的css，html，*.spec.ts(測試代碼)，ts都生成了；同時app.module.ts也做到了及時更新
如果沒有元件化經驗的同學可能會問，為啥有css，html，ts，*.spec.ts都放在這下面啊？因為元件化可以重複使用，提高效率，龐大的工程代碼中可以提高可維護性，閱讀性，友善測試等等；
2>.再試着建立一個angular的子產品
在webstorm下方Terminal視窗下執行指令
ng g module about
此時可以看出建立了about.module.ts的檔案。