The Will Will Web

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

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

📅 2018/09/01 15:26 📁 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

    最後，執行以下兩個命令，確認 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.zip 到 D:\ 目錄下。

    設定 npm 預設快取目錄

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

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

    npm config set prefer-offline true

  3. 解壓縮 VSCode-win32-x64-1.26.1.zip 到 D:\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

相關連結

留言評論