Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 8 開發環境說明

Angular 8 開發環境說明

為了能讓大家能夠順利的建立起 Angular 8 開發環境,以下是需要安裝的相關軟體與安裝步驟與說明。

[ 作業系統 ]

  • Windows 7 以上版本 (更新到最新 Service Pack 版本)
  • Mac OS X 10.6 以上版本

[ 套件管理器 ( Mac OS X Only ) ]

[ 瀏覽器 ]

[ 安裝 Git 工具 ]

首次使用 Git 必須做的設定 (必要設定)

  • 請開啟命令提示字元或終端機視窗,並輸入以下指令進行設定,這是使用 Git 之前的必要步驟:
    • 設定您的名稱: git config --global user.name 您的名稱
    • 設定電子郵件: git config --global user.email 您的電子郵件

[ 開發工具 ]

[ 安裝 Node.js 工具 ]

[ 安裝 Angular CLI 工具 ]

  • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X),並執行以下指令安裝 npm 套件 (這個動作會執行 1 ~ 3 分鐘):

    npm install -g @angular/cli
    
  • 驗證安裝結果的指令

    • ng version
      • 確認 8.3.4 以上版本

[ 驗證 Angular CLI 執行 ]

  • 請依據下列步驟測試 Angular CLI 是否可以正常執行:
    • 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
    • 建立 demo1 專案資料夾與 Angular 專案骨架,請執行下列指令:
      • ng new demo1 --routing --style css
      • 這個過程會建立 Angular 專案檔案並自動安裝所有 npm 相依套件!
    • 進入 demo1 目錄
      • cd demo1
    • 啟動 Angular 開發伺服器並自動開啟網頁 ( http://localhost:4200/ )
      • ng serve --open
  • 畫面上只要出現 Welcome to demo1! 字樣,就代表設定成功!👍

常見問題解答

  1. 使用 npm 安裝套件時都會出現「指定的路徑、檔名,或是兩者都太長。完整的檔名必須少於 260 個字元,並且目錄名稱必須少於 248 個字元」錯誤訊息怎麼辦?

  2. 請問我公司因為需要設定代理伺服器 (Proxy Server) 才能上網,請問要做那些設定才好呢?

  3. 請問我的 tsc -v 所回傳的版本一直都是舊版,執行 npm install -g typescript 也執行好幾次了,為什麼會這樣呢?

  4. 若是用 Mac OS X 電腦,覺得每次安裝 global npm 模組都要打 sudo 很麻煩的話,可以建議用以下命令重裝 node 與 npm
    參考文章:How to use npm global without sudo on OSX

    brew install node --without-npm
    mkdir "${HOME}/.npm-packages"
    echo NPM_PACKAGES="${HOME}/.npm-packages" >> ${HOME}/.bashrc
    echo prefix=${HOME}/.npm-packages >> ${HOME}/.npmrc
    curl -L https://www.npmjs.org/install.sh | sh
    echo NODE_PATH=\"\$NPM_PACKAGES/lib/node_modules:\$NODE_PATH\" >> ${HOME}/.bashrc
    echo PATH=\"\$NPM_PACKAGES/bin:\$PATH\" >> ${HOME}/.bashrc
    echo source "~/.bashrc" >> ${HOME}/.bash_profile
    source ~/.bashrc
    
  5. 如何將 npm 升級到最新版本

    網路上常見的 npm 升級方法,基本上都不適用於 Windows 平台,你必須參考 npm-windows-upgrade 的說明進行升級動作。

    1. 安裝 npm-windows-upgrade 套件

      npm install --global --production npm-windows-upgrade

    2. 執行升級動作

      npm-windows-upgrade --npm-version latest

    其他平台可以透過 npm i -g npm@latest 直接進行升級動作。

@passerbyid

This comment has been minimized.

Copy link

passerbyid commented May 11, 2017

使用 homebrew 安裝 node 建議用 brew install node@6,不然會裝到 7。

@karocksjoelee

This comment has been minimized.

Copy link

karocksjoelee commented May 11, 2017

不是很了解 MAC 使用者開發Angular 4 要用 Homebrew的原因 ...

@jeffwu85182

This comment has been minimized.

Copy link

jeffwu85182 commented May 15, 2017

@passerbyid 其實裝到 7 也是可以的,安裝 6 或 7 都可以正常執行 Angular CLI。

@karocksjoelee Homebrew 屬於非必要的安裝項目,主要是方便管理需要用到的環境套件,像是 node.js, git, nvm, ... 等,當然也能直接安裝 git 或 node.js,因此若有使用 Homebrew 的話,就直接透過指令安裝與管理也是可以的。

@roycrxtw

This comment has been minimized.

Copy link

roycrxtw commented Jul 22, 2017

很清楚的說明!! Thanks

@litaksang

This comment has been minimized.

Copy link

litaksang commented Dec 9, 2017

我用VS code mac community 7.3 ,文中所述的extension都不能裝?

@doggy8088

This comment has been minimized.

Copy link
Owner Author

doggy8088 commented Jul 11, 2018

@litaksang 這些 extension 都只能安裝在 Visual Studio Code 喔!

@jinntser

This comment has been minimized.

Copy link

jinntser commented Jul 12, 2019

Node.js 的最低版本 官方文件 是寫 v10.9+,若用 NVM 管理 Node.js 版本的話最新 stable 版本似乎只到 v10.14.1

@doggy8088

This comment has been minimized.

Copy link
Owner Author

doggy8088 commented Jul 12, 2019

@jinntser 沒錯,我已經調整了文件,修改為 至少需要 v10.9 以上版本,多謝!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.