The Will Will Web | 離線安裝完整 Angular 開發環境的標準作業流程 (大型企業適用)

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

離線安裝完整 Angular 開發環境的標準作業流程 (大型企業適用)

這兩個月經常在新竹科學園區進行 Angular 企業內訓,有越來越多的企業意識到 Angular 帶來的高價值(High Value)與低總體成本(Low TCO)。不過,在高度資安的防護下,我經常需要協助學員「離線安裝」完整的 Angular 開發環境,而且必須在「無管理員身分」的權限下進行安裝。雖然我已經寫了不少相關文章,但環境設定上還是沒甚麼效率。今天這篇文章,我特地整理詳細的設定步驟,幫助大家更順利的設立 Angular 開發環境。

準備離線安裝素材

為了讓大家能夠順利地在 Windows 安裝開發環境,有很多必要的準備,才能讓其他開發人員「完整離線安裝」所有必要的工具與環境。

  1. 完整移除現有 Node.js 安裝

    直接從「控制台」的「程式和功能」移除 Node.js 應用程式。

    接著以系統管理員身分開啟「命令提示字元」視窗,並執行以下命令,完整清除 Node.js 所有設定。

    del "%USERPROFILE%\.npmrc"
    rmdir /s /q "C:\Program Files\nodejs"
    rmdir /s /q "%APPDATA%\npm"
    rmdir /s /q "%APPDATA%\npm-cache"
    
  2. 下載與安裝 Node.js 與 npm 套件

    請到 Download | Node.js 下載 Windows Binary (.zip) 版本。請務必下載正確的 CPU 架構版本,一般來說,大部分公司的電腦都已經是 64-bit 版本,但有些公司只能使用 32-bit 的版本,所以要注意。

    • 32-bit: https://nodejs.org/dist/v8.11.4/node-v8.11.4-win-x86.zip
    • 64-bit: https://nodejs.org/dist/v8.11.4/node-v8.11.4-win-x64.zip

    直接解壓縮到任意目錄,假設我直接解壓縮 64-bit 壓縮檔到 D:\ 目錄下,就會產生一個 D:\node-v8.11.4-win-x64 目錄,請將目錄更名為 D:\Nodejs

    請用以下命令開啟「環境變數」編輯視窗,修改「使用者環境變數」的 PATH 環境變數,加入 D:\Nodejs 路徑在最後面,記得不同的路徑之間是以 ; 分號間隔。

    rundll32 sysdm.cpl,EditEnvironmentVariables
    

    如果要偷懶,也可以執行以下命令快速設定。不過這段設定有個小缺點,這樣設定會把系統環境變數中的 PATH 也一併複製到「使用者環境變數」下,雖然不影響執行,但我覺得有點髒,不建議這樣設定。

    setx PATH "%PATH%;D:\Nodejs"
    

    最後,執行以下兩個命令,確認 Node.js 與 npm 可以正常執行。

    node -v
    npm -v
    
  3. Angular 相關 npm 套件快取

    預設 npm 套件快取路徑位於 %APPDATA%\npm-cache 目錄下。但我建議將這個路徑調整到 D:\Nodejs\npm-cache 目錄下,目錄放在一起,比較方便日後安裝。調整設定請使用以下命令:

    npm config set cache "D:\\Nodejs\\npm-cache"
    

    首先,先安裝全域的 @angular/cli 套件。請注意:以下命令預設會將 ng 安裝到 D:\Nodejs 目錄下,那是因為我們第 2 步驟的 Node.js 安裝過程,並沒有設定 prefix 這個參數。如果你是使用 *.msi 安裝檔進行安裝,他會預設幫你設定好 prefix%APPDATA%\npm 目錄。我覺得將全域 npm 套件直接安裝到 D:\Nodejs 比較方便些,可以幫助學員更方便完成環境安裝。

    npm install -g @angular/cli
    

    請測試一下 ng 命令是否可以正常執行:

    ng -v
    

    接著,我們直接透過 ng new 命令,建立一遍完整的 Angular 開發環境,並且自動將所需安裝的套件快取起來。

    ng new demo1 --skip-git --skip-tests
    

    如果必須要事先在開發環境載入 jquery@types/jquery 套件,建議執行以下命令,將套件先快取起來。

    cd demo1
    npm install jquery @types/jquery
    
  4. 下載 Visual Studio Code 檔案

    請到 Visual Studio Code 下載頁面 並下載 .zip 壓縮檔回來。

    • 64-bit: https://code.visualstudio.com/docs/?dv=winzip (VSCode-win32-x64-1.26.1.zip)
    • 32-bit: https://code.visualstudio.com/docs/?dv=win32zip (VSCode-win32-ia32-1.26.1.zip)
  5. 下載 Visual Studio Code 擴充套件

    由於 Visual Studio Code 至今沒有簡單的離線安裝步驟,如果要安裝多個擴充套件,目前沒有任何可以自動化下載離先安裝檔的方式。所以,你必須先開啟 Visual Studio Code 程式,手動安裝完所有擴充套件才行。以下兩個套件,請先行安裝好:

    安裝完成後,所有擴充套件的儲存路徑預設都存在 %USERPROFILE%\.vscode 目錄下。

以上素材準備後之後,請盤點一下所有檔案清單:

  1. Node.js + npm-cache

    請將 D:\Nodejs 目錄完整壓縮起來,假設檔案名稱為 node-v8.11.4-win-x64_npm-cache_angular-cli-v6.1.5.zip

  2. Visual Studio Code

    請檢查是否有個 VSCode-win32-x64-1.26.1.zip 檔案

  3. Visual Studio Code 擴充套件

    請將 %USERPROFILE%\.vscode 目錄完整壓縮起來,假設壓縮檔為 VSCode-win32-x64-1.26.1-exts.zip

離線安裝開發環境

  1. 先取得三個壓縮檔案 ( 線上下載 )

    • node-v8.11.4-win-x64_npm-cache_angular-cli-v6.1.5.zip
    • VSCode-win32-x64-1.26.1.zip
    • VSCode-win32-x64-1.26.1-exts.zip
  2. 解壓縮 node-v8.11.4-win-x64_npm-cache_angular-cli-v6.1.5.zipD:\ 目錄下。

    設定 npm 預設快取目錄

    npm config set cache "D:\\Nodejs\\npm-cache"
    

    設定 npm 預設採用離線安裝優先

    npm config set prefer-offline true
    
  3. 解壓縮 VSCode-win32-x64-1.26.1.zipD:\VSCode 目錄下。

  4. 解壓縮 VSCode-win32-x64-1.26.1-exts.zip%USERPROFILE%\ 目錄下。

  5. 設定 PATH 環境變數,加入以下兩個路徑:

    • D:\Nodejs
    • D:\VSCode\bin

    快速啟動環境變數編輯器的命令:

    rundll32 sysdm.cpl,EditEnvironmentVariables
    
  6. 啟動「命令提示字元」視窗,並測試執行以下命令:

    先檢查版本資訊:

    node -v
    npm -v
    ng -v
    

    建立 Angular 專案骨架 ( 跳過 Git 初始化與 npm install 動作 )

    ng new demo1 --skip-git --skip-install
    

    進入專案資料夾

    cd demo1
    

    嘗試「完全離線」安裝 (如果有錯誤發生,還要看下個步驟能不能執行才能確定是否設定成功)

    npm install --offline
    

    啟動 Angular 應用程式 (如果可以成功執行,且看到網頁顯示,就代表沒問題)

    npm start
    

    開啟瀏覽器,打開 http://localhost:4200/ 網頁。如果可以看到大大的 Angular 圖示,就代表你設定成功啦!

  7. 如果上述都可以成功設定,未來在使用 Angular 開發的過程中,就可以跟一般人完全相同。

    建立新專案

    ng new demo1 --routing
    

    建立新元件

    ng g c header --skip-tests
    

    安裝 jquery 與 @types/jquery 套件

    npm i jquery @types/jquery
    

相關連結