windows 10 搭建angular開發環境

 

一、環境介紹

1、開發環境：Windows10 

2、開發ide工具：VS code https://code.visualstudio.com/

二、准備環境

1、下載並安裝nodejs(建議下載LTS版本)，安裝過程中會默認添加path，不要不小心取消掉了。

2、Nodejs安裝完成之后，先使用下面兩個命令檢查安裝是否正常，如果正常話應該會顯示相應的版本號。

node -v    查看node版本  
npm -v      查看npm版本 

3、安裝Typescript和Angular CLI

　  安裝之前我們先設置一下淘寶鏡像，這樣npm下載速度會快一些     

npm config set registry https://registry.npm.taobao.org  

　　接下來，我們就可以真正的安裝Typescript了。　　

npm install -g typescript typings  

　　之后安裝Angular CLI，此處注意不要使用angular-cli

npm install -g @angular/cli  

三、安裝失敗以及解決辦法

1、Angular CLI安裝失敗，使用下面命令卸載，然后重新安裝

npm uninstall @angular/cli
npm cache clean
npm cache verify --force

　　執行上面命令之后，找到C盤-->用戶-->你登錄的賬戶-->AppData-->Roaming-->npm目錄並且刪除

2、缺少Python環境

　　a、下載並安裝Python，官方下載

　　b、安裝時，最好直接安裝到C盤根目錄，比如C:\Python27\python.exe

　　c、檢查配置環境變量path路徑，電腦->屬性->高級配置->環境變量->把安裝的Python路徑復制到path里面就可以了 

四、配置VS code 

　　1、點擊菜單中的【調試】按鈕，選擇【安裝其他調試器】，然后搜索 Debugger for Chrome 並安裝

　　2、找到launch.json文件，並修改一下內容

{
    // 使用 IntelliSense 了解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [          
        {
            "type": "Chrome",
            "request": "launch",
            "name": "Launch Chrome with ng serve",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

　　3、在VS code 中的終端里面輸入 ng serve，項目就會啟動

　　最后就可以直接F5啟動並且任意debug調試了