使用Angular CLI創建Angular 2項目

一、安裝nvm-windows，方便node版本切換

 
 
 
         

  
  
  
          
nvm list #查看已安裝的版本
  
  
  
          
nvm install 6.11.0 #安裝Node.js 6.11.0，因為@angular/cli需要6.9版本以上支持
  
  
  
          
nvm use 6.11.0 #切換到新安裝的版本
 
 
 
         

二、為npm配置proxy(proxy軟件需自行安裝)

 
 
 
         

  
  
  
          
npm config set proxy=http://localhost:1080
  
  
  
          
npm config set https-proxy=http://localhost:1080
 
 
 
         

三、安裝@angular/cli（正式版）

 
 
 
         

  
  
  
          
npm install -g @angular/cli
 
 
 
         

安裝完后，查看ng版本（如下圖）

 
 
 
         

  
  
  
          
ng version 
 
 
 
         

四、使用webstorm創建Angular 2項目

1.打開webstorm，選擇"create new project"

2.選擇Angular CLI，此時會自動偵測並配置剛才安裝好的Angular CLI（如下圖）

3.點右下角“create”，創建project

4.當Run窗格中出現“Installing packages for tooling via npm ”字樣時，需稍等片刻，之后即可successfully created（如下圖）

五、啟動項目

1. terminal中輸入

 
 
 
         

  
  
  
          
ng serve
 
 
 
         

1. 出現編譯成功信息（如下圖）
   

2. 瀏覽器地址欄輸入：localhost:4200，顯示如下圖即OK
   

遇到的問題

1.“You have to be inside an angular-cli project in order to use the serve command”

@angular/cli正式版安裝后，依然在使用beta版，故報錯（如下圖）

查看版本，的確是beta版（如下圖）

參考官方升級文檔，需卸載之前beta版

 
 
 
         

  
  
  
          
nvm use 5.12.0 #切換node版本
  
  
  
          
npm uninstall -g angular-cli # Remove global package
  
  
  
          
npm uninstall --save-dev angular-cli # Remove from package.json