- 課程名稱： Angular 2 開發實戰：新手入門篇
為了能讓大家能在課堂上順利地進行實作，請先將需要的軟體全部安裝好，以下是安裝的相關軟體與安裝步驟與說明。
- Windows 7 以上版本 (更新到最新 Service Pack 版本)
- Mac OS X 10.6 以上版本
- Homebrew — The missing package manager for OS X
- 安裝過程會要求你安裝一份沒有 IDE 的 Xcode 應用程式
- 需要有 bash 或 zsh 的 Shell 環境
- 相關連結
- Visual Studio Code
- 必要安裝
- 選擇安裝
- 安裝 Angular-io-Code 擴充套件
- 安裝 EditorConfig for VS Code 擴充套件
- 安裝 refactorix 擴充套件
- 安裝 JavaScript (ES6) code snippets 擴充套件
- 安裝 TypeScript Import Assistance 擴充套件 (當 Auto Import 不能用時可以替代)
- 安裝 HTML Snippets 擴充套件
- 安裝 Auto Rename Tag 擴充套件
- 安裝 VS Code Plugin for the Angular Language Service 語言服務
由於 Visual Studio Code 已內建 Git 工具，因此以下工具僅建議安裝 (非必要)。
- Windows
- Mac
- Git
- SourceTree
- 若使用 Brew 的話，可以用
brew install git指令安裝
-
請安裝 Node.js v6.9.5 LTS 以上版本
- 如果是 Mac 用戶，若使用 Brew 的話，可以用
brew install node指令安裝 - 如果你的 Windows 已經安裝過舊版 Node.js 的話，建議完整移除後重裝一次，完整移除 Node.js 的方法請參考以下步驟說明：
- 先到控制台手動移除
Node.js應用程式 - 開啟命令提示字元視窗 (Command Prompt) (請以系統管理員身分開啟)
- 先到控制台手動移除
- 執行
del "%USERPROFILE%\.npmrc"命令 (此檔案不一定存在，如發生錯誤訊息請自動忽略) 4. 執行rmdir /s/q "C:\Program Files\nodejs"命令 5. 執行rmdir /s/q "%APPDATA%\npm-cache"命令 6. 執行rmdir /s/q "%APPDATA%\npm"* 請注意： 最後這個步驟會移除您先前曾經安裝過的所有 npm 全域套件(global packages)
- 如果是 Mac 用戶，若使用 Brew 的話，可以用
-
開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)，並執行以下指令安裝 npm 套件 (這個動作會執行 5 ~ 10 分鐘)：
npm install -g @angular/cli -
驗證安裝結果的指令
node -v- 確認
v6.9.5以上版本
- 確認
ng -v- 確認
1.0.0-beta.31以上版本 (如果版本很舊，請參見本文下方的常見問題解答第 4 點)
- 確認
[ 驗證 Angular-CLI 執行 ]
- 請依據下列步驟測試 Angular-CLI 是否可以正常執行：
- 開啟「命令提示字元」視窗 (Windows) 或 Terminal 應用程式 (Mac OS X)
- 建立 demo1 專案資料夾與 Angular 2 專案骨架 (不要建立單元測試程式碼)，請執行下列指令：
ng new demo1 --skip-tests- 這個過程會建立 Angular 2 專案檔案並自動安裝所有 npm 相依套件！
- 進入 demo1 目錄
cd demo1
- 啟動 Angular 2 開發伺服器
npm start
- 開啟 Google Chrome 瀏覽器，並連接到以下網址
-
使用 npm 安裝套件時都會出現「指定的路徑、檔名，或是兩者都太長。完整的檔名必須少於 260 個字元，並且目錄名稱必須少於 248 個字元」錯誤訊息怎麼辦？
-
請問我公司因為需要設定代理伺服器 (Proxy Server) 才能上網，請問要做那些設定才好呢？
-
請問我的
tsc -v所回傳的版本一直都是舊版，執行npm install -g typescript也執行好幾次了，為什麼會這樣呢？ -
我已經安裝過舊版的 Angular CLI 工具，該怎樣升級到新版？
-
標準的升級步驟如下：
npm uninstall -g angular-cli npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli
-
-
若是用 Mac OS X 電腦，覺得每次安裝 global npm 模組都要打 sudo 很麻煩的話，可以建議用以下命令重裝 node 與 npm
參考文章：How to use npm global without sudo on OSXbrew 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
-
每次從命令提示字元中開啟 Visual Studio Code 都會有很多偵錯訊息出現，畫面感覺很亂，可以調整嗎？
-
如果你想將 Angular CLI 升級到
@angular/cli: 1.0.0-beta.31版本，以下 13 點事情可以了解一下，前 5 點一定要看：- 記得要將 Node.js 升級到
6.9以上版本 - 記得要將舊版
angular-cli套件移除npm uninstall -g angular-cli - 安裝新版的 @angular/cli 套件
npm install -g @angular/cli - 先前建立的 Angular 2 專案不需要做任何更新
- 先前建立的 Angular 2 專案請改用
npm start啟動伺服器- 因為透過
npm start會用專案內node_modues裡面的 Angular CLI 啟動開發伺服器，以前大家常用的ng serve則是使用 global npm module 的ng來啟動，但升級之後跟專案版本不一致就可能會導致錯誤，所以建議大家改變習慣，以後都用npm start來啟動 webpack dev server。
- 因為透過
- 以前的
ng github-pages:deploy命令已經在這版移除，未來會用 plugins 的方式重新釋出。例如: https://github.com/angular-buch/angular-cli-ghpages - 新版本的
ng new增加-ng4參數，可建立 Angular 4 專案 - 新版本可以透過
ng set --global packageManager=yarn設定預設用 yarn 來安裝 (安裝速度快一點)，也可以透過ng set --global packageManager=npm改回原本設定 - 原本的
ng new可以加上--skip-npm參數跳過 npm 安裝，現在已經改用--skip-install參數來取代 (因為加入了 yarn 的關係) - 現在打
ng help generate會出現比以前還完整的參數說明 ng build新增--sourcemaps參數 (是之前--sourcemap的別名)- 新版支援 serviceWorker 實驗性功能，不熟 Service Worker 的人建議先不要用，不然你的檔案被 cache 住之後，頁面上可能會無法反映出修改後的程式執行結果。
- 記得要將 Node.js 升級到