離線安裝完整 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 程式，手動安裝完所有擴充套件才行。以下兩個套件，請先行安裝好：

   • VS Code 的中文(繁體)語言套件
   • Angular Extension Pack

   安裝完成後，所有擴充套件的儲存路徑預設都存在 %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

相關連結