这是株式会社P.R.O的Advent Calendar的第15天。

首先

作为一名几乎没有编程经验，只有HTML和JavaScript基础知识的我，当我开始学习Angular时，不知道该从哪里开始。因此，我决定先实际操作，边学边动手，这样记忆会更快。我选择了Angular官方教程（英雄之旅）作为实践内容。在其中，我遇到了一些在设置本地环境时发生的错误而苦恼。为了兼顾记录和分享，我将以业余角度解释如何解决这些错误以及如何搭建本地环境。

Angular是什么

“Angular（アンギュラー）是一种基于TypeScript开发的开源前端Web应用程序框架，由Google以及个人和企业社区共同开发。”

我本来想要讨论一下Angular，所以进行了各种调查，但由于有很多难懂的词汇，我无法很好地解释…
所以对于那些不太了解Angular或者想要详细了解的人，请参考Angular官方网站。

环境设定

1. 安装 Node.js / npm

要在本地系统上安装Angular，需要使用npm。
npm是Node.js的包管理工具。
首先打开Node.js，然后从Downloads中选择适合自己电脑的安装程序进行下载。

如果能够显示版本，则表示安装成功。

2. 安装Angular CLI。

Angular CLI是官方的命令行工具，可以高效地创建新的Angular应用程序。

在终端打开，并执行以下命令：
npm install -g @angular/cli

如果成功执行，将安装Angular CLI。
如果你能成功执行，可以跳过第三步，直接创建工作空间和初始应用程序。

我在这里遇到了以下错误。

EACCES: permission denied, access ‘/usr/local/lib/node_modules/npm/node_modules/<パッケージ名>

查阅后发现，官方文档中有相应的措施。

Mac上发生错误了吗？
1. 创建用于全局安装的目录
mkdir ~/.npm-global
2. 使用npm设置新目录
npm config set prefix ‘~/.npm-global’
3. 打开或创建~/.profile，并添加以下行
export PATH=~/.npm-global/bin:$PATH
4. 应用第2步的更改
source ~/.profile
5. 为了验证新配置，按照官方文档的要求，在没有sudo的情况下安装jshint
npm install -g jshint

通过手动更改npm的默认目录，问题得以解决。

创建工作空间和初始应用程序。

接下来，我们将使用ng命令来创建工作区文件夹。

使用ng命令创建名为my-app的工作空间文件夹。
执行以下命令：
ng new my-app

使用ng new命令时，您将被要求输入有关包含在第一个应用程序中的功能的信息。按下Enter键或Return键以接受默认选项。
如果您已经完成了ng new操作，请跳过执行第4步：应用程序运行。

当我在这里输入CLI的ng命令时，显示出找不到命令的错误信息。

ng: command not found

查了一下，似乎ng命令的PATH没有配置正确。
说起来，刚才在安装Angular CLI时，把Angular的CLI（ng文件）保存在了~/.npm-global目录下。

通过将ng命令的路径加入PATH解决了这个问题。
1. 打开终端启动时加载的bash设置文件。
vi ~/.bash_profile
2. 在bash_profile中添加以下内容。
alias ng=“~/.npm-globa/bin/ng”
完成添加后，保存并退出vi。
3. 为了立即应用bash_profile的更改，执行source命令。
source ~/.bash_profile

由于ng命令的路径已经设置正确，现在可以创建工作区文件夹了。

当CLI命令”ng new”完成后，会创建一个新的工作空间和一个简单的欢迎应用程序，可以立即运行。

执行应用程序

进入创建的工作空间文件夹（my-app）。
cd my-app

使用“ng serve”命令启动服务器。
使用“ng serve –open”命令启动服务器并打开网页。

运行ng serve命令会启动服务器，监视文件，并在更改这些文件时重新构建应用程序。
–open选项会自动在浏览器中打开 http://localhost:4200/。

总结一下

我已经详细整理了有关Angular本地环境的设置过程，并附上了在设置过程中遇到的错误。

想要开始学习Angular的朋友们，请务必尝试学习Angular官方教程（英雄之旅）！