[Angular] Setting up the local environment and workspace for macOS

前言

最近換到ＭacOS 開發，想要建一個新的 Angular Application，直覺得按照以前 Windows 上的方法，去 Node.js 官網下載安裝檔安裝，前面都很順利，卻在安裝 Angular CLI 時發生 EACCES permissions errors ，參考了文章 Resolving EACCES permissions errors when installing packages globally ，使用 nvm (node version manager) 重新安裝 npm 。

簡述步驟

安裝 Homebrew (MacOS 套件管理工具)

使用 Brew 安裝設定 nvm (NVM：管理 node.js 版本工具)

使用 nvm 指令安裝 node.js，確認 node.js 和 npm 是否安裝成功

使用 npm 安裝 Angular CLI，開始建立 Angular Application

安裝 HomeBrew

打開 terminal 輸入以下指令

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝完成後，使用 brew --version 確認安裝成功。

安裝設定 NVM

先更新 brew，然後安裝 nvm

% brew update
% brew install nvm
...
...
You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/opt/nvm will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type nvm help for further information.
==> Summary
🍺  /usr/local/Cellar/nvm/0.38.0: 7 files, 176KB

按照提示，建立 ~/.nvm 資料夾

% mkdir ~/.nvm

編輯 ~/.zshrc

% vi ~/.zshrc

加入以下內容後，:wq 存檔離開

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

使用 source 命令，使檔案中的配置生效

% source ~/.zshrc

查看一下是否生效

% echo $NVM_DIR
/Users/your-username/.nvm

查看幫助

% nvm --help
...
...
Note:
  to remove, delete, or uninstall nvm - just remove the $NVM_DIR folder (usually ~/.nvm)

注意最後一句話，刪除 nvm 很簡單，只需刪除 $NVM_DIR 資料夾即可

安裝 Node.js

查看所有 node.js 版本

% nvm ls-remote

安裝需要版本

% nvm install {node.js 版本編號}
% nvm install 12

查看目前使用版本和已安裝的版本

% nvm ls
->     v12.22.1
default -> 12 (-> v12.22.1)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v12.22.1) (default)
stable -> 12.22 (-> v12.22.1) (default)
lts/* -> lts/fermium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.1
lts/fermium -> v14.16.1 (-> N/A)

切換版本

% nvm use 12

刪除版本

% nvm uninstall 12

檢查 node.js 和 npm 版本

% node --version
v12.22.1
% npm --version
6.14.12

安裝 Angular Cli

使用 npm 安裝

% npm install -g @angular/cli

檢查版本

% ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _ | | | | |/ _ | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.12
Node: 12.22.1
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1102.12 (cli-only)
@angular-devkit/core         11.2.12 (cli-only)
@angular-devkit/schematics   11.2.12 (cli-only)
@schematics/angular          11.2.12 (cli-only)
@schematics/update           0.1102.12 (cli-only)

建立 Angular Application

建立 workplace 資料夾和初始化 application

% ng new {application_name}
? 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 Yes/No
? Would you like to add Angular routing? Yes/No
? Which stylesheet format would you like to use? CSS/
...
...
✔ Packages installed successfully.
    Successfully initialized git.

啟動 application

% cd angular-tour-of-heroes
% ng serve --open

參考資料

Resolving EACCES permissions errors when installing packages globally | npm Docs

Homebrew

macOS 上使用 brew 安装 NVM 管理 node.js

「Mac」Homebrew：Mac 必裝的套件管理工具 | Victor Hung's Diary

Brew install nvm. nvm: command not found

【程式】透過Homebrew安裝Node.js（Mac）

問題

zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?

运行compaudit返回如下：

% compaudit
There are insecure directories:
/usr/local/share/zsh/site-functions
/usr/local/share/zsh

关闭group-writable权限

% chmod g-w /usr/local/share/zsh
% chmod g-w /usr/local/share/zsh/site-functions

现在重新打开一个terminal 就不会看到任何 “zsh compinit: insecure directories” 的提示信息了
原文链接：https://blog.csdn.net/weixin_44176432/article/details/109293804