要想在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的文件。
