安装 Node.js 和 Npm

访问 Node.js 官网，下载相应操作系统的安装包并运行安装。注意：Npm 软件包默认包含在 Node.js 软件包中。

安装完成后，运行下面的命令，验证安装：

node -v
v16.14.2

npm -v
8.5.5

安装 Git

访问 Git 官方网站，下载相应操作系统的安装包并运行安装。

安装完成后，运行下面的命令，验证安装：

git —version
git version 2.32.0 (Apple Git-132)

Git 不是学习 Angular 的必选项，但是推荐大家安装，并把代码上传到远程仓库中，养成良好的开发习惯。

安装 Angular

Angular CLI 是 Angular 生态系统的一部分，可以使用 npm 包管理工具下载安装。打开命令行工具，运行下面的命令安装 Angular CLI.

安装最新版本：

npm install -g @angular/cli

安装指定版本：

npm install -g @angular/cli@10.2.0

参数说明：

install or i: npm 的安装命令
-g: 表示安装在系统全局范围
@angular/cli: 表示安装包的名称
@10.0.0: 表示安装包的版本

安装完成后，运行下面的命令，验证安装：

ng version

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

Angular CLI: 10.2.0
Node: 16.14.2
OS: darwin x64

Angular: 
… 
Ivy Workspace: 

Package                      Version
———————————————————————————
@angular-devkit/architect    0.1002.0 (cli-only)
@angular-devkit/core         10.2.0 (cli-only)
@angular-devkit/schematics   10.2.0 (cli-only)
@schematics/angular          10.2.0 (cli-only)
@schematics/update           0.1002.0 (cli-only)

注意：Angular CLI 的主版本号应该与 Angular 的主版本号相匹配，小版本号可以不同。

更多 Angular CLI 的内容可以参考官方网站：

Visual Studio Code

Visual Studio Code, 或者简称 VS Code，是微软主导开发的一款开源的源代码编辑器，在 Angualr 开发社区被广泛使用。其中一个重要原因就是对 TypeScript 语言的强大支持。当然，TypeScript 也是微软主导开发的一种语言，VS Code 内置支持，使得开箱即用，无需额外配置。

访问 Visual Studio Code 官网，下载相应操作系统的安装包并运行安装。

安装扩展

VS Code 提供了大量的扩展，可以对开发环境进一步优化，带来更好对编码体验。下面我们就安装一些扩展，方便 Angular 的开发。

打开 VS Code，导航到扩展菜单。
在上方的搜索框中，输入 Angular Essentials 关键字。
点击第一个搜索结果的 安装 按钮，完成扩展的安装。

Angular Essentials 扩展包安装了几个常用的 Angular 扩展，下面对主要的扩展做一个简单介绍。

Angular Language Service：由 Angular 团队开发和维护，提供代码完成、导航和错误检测等功能。
Angular Snippets：提供了 TypeScript 和 HTML 代码片段，方便创建 Angular 的相关功能类。
TSLint：提供一组规则，对 TypeScript 代码进行静态分析，确保代码的可读性，可维护性和错误检查。
Material icon theme：提供了额外的满足谷歌规范的图标，让文件的 icon 变得更美。
EditorConfig：提供了编辑器的设置规则，有助于保持团队开发风格的一致性。

展示一下Material icon theme扩展的效果。项目文件默认的风格如下：

默认风格

使用扩展后，改为 Material 风格：

Material 风格

验证环境

最后，我们使用搭建好的开发环境创建一个简单的项目，验证一下开发环境是否能正常工作。

打开命令行工具，导航到你的工作文件夹，执行下面的命令：

ng new my-app

你会遇到两个个提示问题。第一个问题是：Would you like to add Angular routing? (y/N)。直接回车，默认不添加 Angula 路由。第二个问题是：Which stylesheet format would you like to use? (Use arrow keys)。你可以使用箭头键，选择在项目中使用的层叠样式表（CSS）的方式。这里，我们可以直接回车，接受默认选项CSS.
回答完两个问题，Angualr CLI 会开始下载和安装依赖包，同时，也会创建一些默认的项目文件。一旦完成上述工作，使用命令行工具，导航到项目的文件夹my-app，运行如下命令：

ng serve

只要看到如下这行代码，就表示项目启动成功。

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

打开浏览器，访问 http://localhost:4200/，可以到如下页面。
默认首页

常见错误

Angualr CLI 在下载和安装依赖包，经常会碰到如下这个问题：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: todo@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.6.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/xxxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxx/.npm/_logs/2022-03-23T08_19_34_491Z-debug-0.log

解决办法：

导航进入 ng new my-app 创建的文件夹，使用 VS Code 并打开 package.json 文件。在 devDependencies 中，把 jasmine-core的版本从 3.6.0 改为 3.8；把 karma-jasmine-html-reporter 的版本从 1.5.0 改为 1.7.0，并保存。然后回到终端，进入项目文件夹，再次运行 npm install，就可以正常工作了。