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

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

### 準備離線安裝素材

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

1.  完整移除現有 Node.js 安裝
    
    直接從「控制台」的「程式和功能」移除 **Node.js** 應用程式。
    
    接著以系統管理員身分開啟「命令提示字元」視窗，並執行以下命令，完整清除 Node.js 所有設定。
    
    ```bash
    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](https://nodejs.org/en/download/) 下載 **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` 路徑在最後面，記得不同的路徑之間是以 `;` 分號間隔。
    
    ```bash
    rundll32 sysdm.cpl,EditEnvironmentVariables
    ```
    
    最後，執行以下兩個命令，確認 Node.js 與 npm 可以正常執行。
    
    ```bash
    node -v
    npm -v
    ```
    
3.  Angular 相關 npm 套件快取
    
    預設 npm 套件快取路徑位於 `%APPDATA%\npm-cache` 目錄下。但我建議將這個路徑調整到 `D:\Nodejs\npm-cache` 目錄下，目錄放在一起，比較方便日後安裝。調整設定請使用以下命令：
    
    ```bash
    npm config set cache "D:\\Nodejs\\npm-cache"
    ```
    
    首先，先安裝全域的 `@angular/cli` 套件。**請注意**：以下命令預設會將 `ng` 安裝到 `D:\Nodejs` 目錄下，那是因為我們第 2 步驟的 Node.js 安裝過程，並沒有設定 `prefix` 這個參數。如果你是使用 `*.msi` 安裝檔進行安裝，他會預設幫你設定好 `prefix` 到 `%APPDATA%\npm` 目錄。我覺得將全域 npm 套件直接安裝到 `D:\Nodejs` 比較方便些，可以幫助學員更方便完成環境安裝。
    
    ```bash
    npm install -g @angular/cli
    ```
    
    請測試一下 `ng` 命令是否可以正常執行：
    
    ```bash
    ng -v
    ```
    
    接著，我們直接透過 `ng new` 命令，建立一遍完整的 Angular 開發環境，並且自動將所需安裝的套件快取起來。
    
    ```bash
    ng new demo1 --skip-git --skip-tests
    ```
    
    如果必須要事先在開發環境載入 `jquery` 與 `@types/jquery` 套件，建議執行以下命令，將套件先快取起來。
    
    ```bash
    cd demo1
    npm install jquery @types/jquery
    ```
    
4.  下載 Visual Studio Code 檔案
    
    請到 [Visual Studio Code 下載頁面](https://code.visualstudio.com/#alt-downloads) 並下載 `.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 的中文(繁體)語言套件](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)
    -   [Angular Extension Pack](https://marketplace.visualstudio.com/items?itemName=doggy8088.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.  先取得三個壓縮檔案 ( [線上下載](https://github.com/doggy8088/angular6-offline-install/) )
    
    -   `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 預設快取目錄
    
    ```bash
    npm config set cache "D:\\Nodejs\\npm-cache"
    ```
    
    設定 npm 預設採用離線安裝優先
    
    ```bash
    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`
    
    快速啟動環境變數編輯器的命令：
    
    ```bash
    rundll32 sysdm.cpl,EditEnvironmentVariables
    ```
    
6.  啟動「命令提示字元」視窗，並測試執行以下命令：
    
    先檢查版本資訊：
    
    ```bash
    node -v
    npm -v
    ng -v
    ```
    
    建立 Angular 專案骨架 ( 跳過 Git 初始化與 npm install 動作 )
    
    ```bash
    ng new demo1 --skip-git --skip-install
    ```
    
    進入專案資料夾
    
    ```bash
    cd demo1
    ```
    
    嘗試「完全離線」安裝 (如果有錯誤發生，還要看下個步驟能不能執行才能確定是否設定成功)
    
    ```bash
    npm install --offline
    ```
    
    啟動 Angular 應用程式 (如果可以成功執行，且看到網頁顯示，就代表沒問題)
    
    ```bash
    npm start
    ```
    
    開啟瀏覽器，打開 `http://localhost:4200/` 網頁。如果可以看到大大的 Angular 圖示，就代表你設定成功啦！
    
7.  如果上述都可以成功設定，未來在使用 Angular 開發的過程中，就可以跟一般人完全相同。
    
    建立新專案
    
    ```bash
    ng new demo1 --routing
    ```
    
    建立新元件
    
    ```bash
    ng g c header --skip-tests
    ```
    
    安裝 jquery 與 @types/jquery 套件
    
    ```bash
    npm i jquery @types/jquery
    ```
    

### 相關連結

-   [前端工程研究：如何在企業內部使用「完全離線」的方式安裝 npm 套件](/post/2018/06/16/Offline-installation-of-npm-packages-for-Enterprise.aspx)
-   [如何在強制使用代理伺服器的環境下設定 git, npm, bower, gem, ionic 工具](/post/2015/09/02/proxy-settings-for-git-npm-bower-gem-ionic.aspx)