# Angular 環境 ## 套件管理介紹 ### Chocolatey Chocolatey 是一個 Windows 下的軟體包管理器 Non-Administrative install 非管理安裝 PowerShell 教學步驟 1. Save the script below as ChocolateyInstallNonAdmin.ps1. 2. Use the script below, determine where you might want Chocolatey installed if it is not to C:\ProgramData\chocoportable. 3. Open PowerShell.exe. 4. Run the following Set-ExecutionPolicy Bypass -Scope Process -Force; 5. Run .\ChocolateyInstallNonAdmin.ps1. ### Chocolatey(檔案命名：ChocolateyInstallNonAdmin.ps1) ### :eight_pointed_black_star:設置安裝目錄如下 * Set directory for installation – Chocolatey does not lock down the directory if not the default ```shell $InstallDir=‘C:\ProgramData\chocoportable’ $env:ChocolateyInstall=“$InstallDir“ ``` **PowerShell若也有受到限制，請繞過權限** * If your PowerShell Execution policy is restrictive, you may not be able to get around that. Try setting your session to Bypass. ```shell Set-ExecutionPolicy Bypass -Scope Process -Force; ``` * All install options - offline, proxy, etc at <https://chocolatey.org/install> ```shell iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')) ``` ## 解壓縮/免安裝 ### :eight_pointed_black_star:環境變數設定 在確定的路徑，EX：C:\Users\xxxxx\Nodejs ```console rundll32 sysdm.cpl,EditEnvironmentVariables ``` ### :eight_pointed_black_star:指令測試 :::info :bangbang: 測試指令前，先將終端機重開 :bangbang: ::: 在**PATH**變數欄位，將解壓縮路徑新增**值** node ```console node –v　 ``` npm ```console npm –v ``` ![link](https://i.imgur.com/AUSSMMR.png) ### :eight_pointed_black_star:安裝Angular及測試 安裝 ```console npm install -g @angular/cli ``` 測試 ```console ng version ``` ```console ng v ``` ![](https://i.imgur.com/R2cHgjr.png) #### 是否願意和谷歌團隊共享資料：N > Would you like to share anonymous usage data about this project with the Angular Team at > Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more > details and how to change this setting, see http://angular.io/analytics. (y/N) #### 是否開啟嚴格模式(較嚴謹的檢查) ：YN > Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/strict (y/N) #### 是否預設配置路由：YN > Would you like to add Angular routing? #### 是否CSS配置前處理器：CSS 或 個人練習適用 > CSS > SCSS [ <https://sass-lang.com/documentation/syntax#scss> ] > Sass [ <https://sass-lang.com/documentation/syntax#the-indented-syntax> ] > Less [ <http://lesscss.org> ] > Stylus [ <https://stylus-lang.com> ] ### GITHUB下載安裝 ![](https://i.imgur.com/WcYW4Rj.png) 下載完B後，請安裝執行 [:link: 安裝執行 >>>> :point_left:](#安裝Angular及測試) ## 相關指令參考 ### 找尋npm快取路徑位置(TEMP暫存資料夾) ```console npm config get cache ``` ### 清除暫存 ```console npm cache clean ``` ### 安裝npm ```console npm install ``` ### 卸載-以angular為例 ```console npm uninstall -g @angular/cli [套件名稱] ``` ### 升級 ```console npm update ``` ### 資料夾位置 ```console CD 資料夾位置\資料夾位置 ``` ### 進到根目錄 ```console CD\ ``` ### 回到上一層 ```console CD .. ``` ### 清除螢幕 ```console CLS ``` ## 資料來源 ### 保哥 [離線安裝完整 Angular 開發環境 (大型企業適用)](https://github.com/doggy8088/angular6-offline-install/) ### 離線安裝 [How to install angular-cli without internet](https://stackoverflow.com/questions/42841600/how-to-install-angular-cli-without-internet) ### Node [NPM 套件管理工具常用指令](https://training.pada-x.com/docs/article.jsp?key=node-npm-simple-reference) [Node.js - 安裝 npm 兩三事](https://ithelp.ithome.com.tw/articles/10211933) [Node.js 是什麼？跟 JavaScript 有什麼關係](https://tw.alphacamp.co/blog/node-js-and-javascript) [‘ng’ 不是內部或外部命令，也不是可執行的程式或批處理檔](https://iter01.com/573142.html) [安裝指定版本](https://segmentfault.com/a/1190000024418942) [如何在 Windows 平台變更 Node.js / npm 全域模組的預設安裝路徑](https://blog.miniasp.com/post/2015/09/01/Change-npm-default-global-installation-directory-for-nodejs-modules-in-Windows) ### 指令 [指令大全](https://alwaysfreesir.blogspot.com/2018/03/cmd.html) [官方指令](https://docs.npmjs.com/cli/v7/commands/npm-config) [Command Line指令教學，為什麼程式設計師都在用CMD](https://codinga-z.online/Coding/2021/05/04/command-line/) 還未實踐 * [[Node.js] 安裝 NVM (Node Version Manager) 來切換 Node.js 版本 for Windows]https://www.onejar99.com/nvm-install-for-windows/ ###### tags: `Angular` `ng-建置環境` `ng-安裝` `ng-指令` `ng-測試`