1. 安裝node.js,下載地址:https://nodejs.org/en/download/,詳細的安裝教程參考這里:https://blog.csdn.net/u010255310/article/details/52205132
直接一路next就可以。安裝好node后,會自動在path中配置了node的安裝路徑,如果命令行無法識別node命令,重啟就好了。
node.js安裝驗證:
node -v
因為NodeJS已經集成了npm,所以npm也一並安裝好了。npm安裝驗證:
npm -v
2. 全局安裝 Angular CLI
npm install -g @angular/cli
3. 進入E盤,新建項目my-app。這里需要等待一會
ng new my-app
4. 進入項目目錄,啟動服務器
cd my-app
ng serve --open
ng serve 命令會啟動開發服務器,監聽文件變化,並在修改這些文件時重新構建此應用。
使用 --open(或 -o)參數可以自動打開瀏覽器並訪問 http://localhost:4200/。如圖
------------------------分割線--------------------------
安裝步驟很簡單,但中間走了很多彎路,因此,主要記錄一下那些曾經走過的彎路。
1. 新建項目時報錯:
npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump npm ERR! Unexpected end of JSON input while parsing near '...registry.npm.taobao.o' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2018-06-08T14_01_13_067Z-debug.log Package install failed, see above.
如下所示:
解決方法:網上查找的一般是說運行:npm cache clean --force,但清除緩存之后,再次新建項目,還是報這個錯。然后根據提示信息,取消了淘寶鏡像,問題解決。
取消淘寶鏡像:
npm config delete registry
npm config delete disturl
運行npm config edit,可看到registry中已經變成了默認鏡像。
如圖:
參考:設置和取消淘寶鏡像
2. 新建項目時報的警告:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 'git' 不是內部或外部命令,也不是可運行的程序 或批處理文件。
如下所示:
這些警告可以忽略
3. 卸載angular,因為反反復復卸載重裝了好幾次angular,因此也記錄一下卸載過程吧
npm uninstall -g angular-cli npm uninstall -g @angular/cli npm cache clean
在運行npm cache clean 時報錯如下圖,根據信息提示改成了npm cache verify
總結:
一定要根據官網教程安裝,網上的教程很多很亂,開始就是根據網上教程裝的很混亂,導致報了很多莫名其妙的錯。