Node.js安装搭建Angular开发环境
一、Node.js 基础认知
在开始搭建 Angular 开发环境之前，我们需要对 Node.js 有一个基本的认识。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它让 JavaScript 能够在服务器端运行，摆脱了浏览器的限制。Node.js 使用事件驱动、非阻塞 I/O 模型，这使得它非常适合构建高性能、可扩展的网络应用程序。
Node.js 的核心特点之一是其模块系统。通过模块，我们可以将代码组织成可复用的单元。Node.js 内置了许多核心模块，例如 http 模块用于创建 HTTP 服务器，fs 模块用于文件系统操作等。同时，Node.js 还支持第三方模块，这些模块可以通过 npm（Node Package Manager）进行安装和管理。
npm 是 Node.js 的包管理工具，它是世界上最大的开源库生态系统。npm 使得安装、更新和管理项目依赖变得非常容易。例如，要安装一个名为 express 的流行 web 框架，我们只需在命令行中输入 npm install express。npm 会自动下载 express 及其所有依赖，并将它们安装到项目的 node_modules 目录中。
二、Node.js 的安装
-
下载 Node.js 安装包 首先，我们需要从 Node.js 官方网站（https://nodejs.org/）下载适合我们操作系统的安装包。Node.js 提供了长期支持（LTS）版本和最新版本。对于大多数生产环境，建议使用 LTS 版本，因为它更稳定，经过了更多的测试。 在下载页面，你会看到两个主要的下载选项：LTS 版本和 Current 版本。点击适合你操作系统的下载链接，例如对于 Windows 用户，点击 “Windows Installer（LTS）” 下载 64 位的安装包。
-
安装 Node.js 下载完成后，运行安装程序。在 Windows 上，安装向导会引导你完成安装过程。在安装过程中，你可以选择安装路径、是否将 Node.js 添加到系统路径等选项。建议勾选 “Add to PATH” 选项，这样在命令行中就可以直接使用
node和npm命令。 在 macOS 上，运行下载的.pkg文件，按照安装向导的提示完成安装。安装完成后，Node.js 和 npm 会被安装到系统的默认路径，并且也会自动添加到系统路径中。 在 Linux 上，安装过程可能因发行版而异。对于基于 Debian 或 Ubuntu 的系统，可以使用以下命令安装 Node.js：
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
对于基于 Fedora 的系统，可以使用以下命令：
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
sudo yum install -y nodejs
- 验证安装
安装完成后，打开命令行终端，输入
node -v和npm -v命令，分别查看 Node.js 和 npm 的版本号。如果安装成功，你会看到相应的版本信息输出，例如：
$ node -v
v14.17.0
$ npm -v
6.14.13
三、Angular CLI 工具介绍
Angular CLI（Command - Line Interface）是 Angular 官方提供的一个命令行工具，它极大地简化了 Angular 项目的创建、开发、测试和部署过程。通过 Angular CLI，我们可以快速生成 Angular 应用的骨架，包括组件、服务、模块等各种 Angular 元素。
Angular CLI 提供了丰富的命令集。例如，ng new 命令用于创建一个新的 Angular 项目，ng generate 命令用于生成各种 Angular 代码文件（如组件、服务、指令等），ng serve 命令用于启动本地开发服务器，实时预览应用程序等。
Angular CLI 还支持代码生成的自定义模板。这意味着我们可以根据项目的需求，定制生成的组件、服务等文件的结构和内容，提高开发效率和代码的一致性。
四、使用 npm 安装 Angular CLI
- 全局安装 Angular CLI 在安装了 Node.js 和 npm 之后，我们可以使用 npm 来安装 Angular CLI。在命令行中运行以下命令：
npm install -g @angular/cli
这里的 -g 选项表示全局安装，这样在系统的任何目录下都可以使用 ng 命令。安装过程可能需要一些时间，因为 npm 需要下载 Angular CLI 及其所有依赖。
- 验证 Angular CLI 安装
安装完成后，在命令行中输入
ng --version命令。如果安装成功，你会看到类似以下的输出，显示 Angular CLI 的版本号以及相关的 Angular 核心包的版本信息：
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.2.13
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64
Angular: 12.2.13
... animations, common, compiler, compiler - cli, core, forms
... platform - browser, platform - browser - dynamic, router
Package Version
---------------------------------------------------------
@angular - cli 12.2.13
@angular - dev - kit/architect 0.1202.13
@angular - dev - kit/build - angular 12.2.13
@angular - dev - kit/core 12.2.13
@angular - dev - kit/schematics 12.2.13
@schematics/angular 12.2.13
rxjs 6.6.7
typescript 4.3.5
五、创建第一个 Angular 项目
- 使用 ng new 命令创建项目
在命令行中，切换到你想要创建项目的目录，例如
cd C:\projects（Windows）或cd ~/projects（macOS/Linux）。然后运行以下命令创建一个新的 Angular 项目：
ng new my - first - app
这里的 my - first - app 是项目的名称，你可以根据需要替换为任何你喜欢的名称。运行该命令后，Angular CLI 会提示你一些选项，例如是否使用路由、选择 CSS 预处理器等。
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
选择是否添加路由和样式表格式后，Angular CLI 会开始创建项目。它会生成项目的基本结构，安装项目所需的依赖，并进行一些初始配置。
- 项目结构分析
创建完成后，进入项目目录
cd my - first - app，查看项目的结构。主要目录和文件如下：
src目录：这是项目的源代码目录，包含了应用的所有代码。其中：app目录：存放应用的主要组件、模块等。默认情况下，会有一个app.component.ts文件，这是应用的根组件。assets目录：用于存放静态资源，如图像、字体等。environments目录：包含不同环境（开发、生产等）的配置文件。index.html：应用的主 HTML 文件，是应用的入口。main.ts：应用的主 JavaScript 文件，用于启动 Angular 应用。
node_modules目录：存放项目的所有依赖包。这些包是通过 npm 安装的，不要手动修改这个目录中的文件。angular.json：这是项目的配置文件，包含了项目的构建、测试、部署等各种配置信息。package.json：记录项目的依赖包信息以及一些脚本命令。可以通过修改这个文件来添加自定义的 npm 脚本。
六、启动 Angular 开发服务器
- 使用 ng serve 命令
在项目目录
my - first - app中，运行以下命令启动 Angular 开发服务器：
ng serve
Angular CLI 会编译项目的源代码，并启动一个本地开发服务器，默认监听 http://localhost:4200 地址。你会在命令行中看到类似以下的输出：
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2022 - 08 - 15T10:30:00.000Z
Hash: 5f9d8c6c7e9b4a9c2f9d
Time: 3000ms
chunk {main} main.js, main.js.map (main) 3.74 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.14 MB [initial] [rendered]
-
在浏览器中预览应用 打开浏览器，访问
http://localhost:4200，你会看到默认的 Angular 欢迎页面。这表明你的 Angular 应用已经成功启动并在本地服务器上运行。 -
实时重新加载 Angular 开发服务器支持实时重新加载（Live Reload）功能。当你修改项目中的源代码文件并保存时，开发服务器会自动检测到变化，重新编译相关代码，并在浏览器中实时更新页面，无需手动刷新浏览器。这大大提高了开发效率，让你能够快速看到代码修改的效果。
七、Angular 项目中的依赖管理
- 理解 package.json
在 Angular 项目的根目录下，有一个
package.json文件。这个文件记录了项目的元数据以及项目的依赖关系。其中，dependencies字段列出了项目运行时所需要的依赖包，devDependencies字段列出了项目开发过程中所需要的依赖包，例如开发服务器、测试框架等。
{
"name": "my - first - app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.13",
"@angular/common": "^12.2.13",
"@angular/compiler": "^12.2.13",
"@angular/core": "^12.2.13",
"@angular/forms": "^12.2.13",
"@angular/platform - browser": "^12.2.13",
"@angular/platform - browser - dynamic": "^12.2.13",
"@angular/router": "^12.2.13",
"rxjs": "~6.6.7",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular - cli": "^12.2.13",
"@angular - dev - kit/architect": "^0.1202.13",
"@angular - dev - kit/build - angular": "^12.2.13",
"@angular - dev - kit/core": "^12.2.13",
"@angular - dev - kit/schematics": "^12.2.13",
"@schematics/angular": "^12.2.13",
"@types/jasmine": "~3.10.0",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^12.20.45",
"codelyzer": "^6.0.2",
"jasmine - core": "~3.10.0",
"jasmine - spec - reporter": "~7.0.0",
"karma": "~6.3.20",
"karma - chrome - launcher": "~3.1.0",
"karma - jasmine": "~4.0.0",
"karma - jasmine - html - reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts - node": "~10.7.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}
- 安装新的依赖包
如果项目需要使用新的第三方库，例如
lodash，可以使用 npm 进行安装。在项目目录中运行以下命令：
npm install lodash
这会将 lodash 安装到 node_modules 目录中，并自动更新 package.json 文件的 dependencies 字段。如果这个库只在开发过程中使用，例如一个代码检查工具，可以使用 --save - dev 选项进行安装：
npm install eslint --save - dev
这样 eslint 会被安装到 node_modules 目录中，并且会被添加到 package.json 文件的 devDependencies 字段中。
- 更新依赖包
要更新项目中的依赖包，可以使用
npm update命令。这个命令会检查package.json中指定的依赖包的最新版本，并根据版本范围进行更新。例如，如果package.json中某个包的版本范围是^1.0.0，npm update会更新到1.x.x系列的最新版本。
npm update
另外，也可以使用 npm install <package - name>@latest 命令来更新单个包到最新版本。例如，要更新 @angular/cli 到最新版本，可以运行：
npm install @angular/cli@latest
八、解决常见安装和环境问题
- npm 安装缓慢或失败 有时候，由于网络问题，npm 安装依赖包可能会很慢或者失败。一种解决方法是使用国内的 npm 镜像源，例如淘宝的 npm 镜像。可以使用以下命令临时使用淘宝镜像源：
npm install --registry=https://registry.npm.taobao.org
如果希望长期使用淘宝镜像源，可以使用 nrm（Node Registry Manager）工具。首先全局安装 nrm：
npm install -g nrm
然后使用 nrm 切换到淘宝镜像源：
nrm use taobao
- 版本兼容性问题
在安装 Angular CLI 或其他依赖包时，可能会遇到版本兼容性问题。例如，某个 Angular CLI 版本可能不兼容特定的 Node.js 版本。为了解决这类问题，首先要确保 Node.js 和 npm 的版本符合 Angular CLI 的要求。可以查看 Angular 官方文档获取版本兼容性信息。
如果遇到依赖包之间的版本冲突，可以尝试升级或降级相关的依赖包。例如，如果某个库的新版本与其他库不兼容，可以尝试安装一个较旧的兼容版本。在
package.json文件中手动指定依赖包的版本，然后运行npm install重新安装依赖。 - 权限问题
在某些操作系统上，尤其是 Linux 和 macOS，在全局安装 npm 包时可能会遇到权限问题。例如，运行
npm install -g @angular/cli时提示权限不足。解决方法是使用sudo命令以管理员权限运行安装命令：
sudo npm install -g @angular/cli
但是，长期使用 sudo 安装 npm 包可能会导致文件权限问题。更好的方法是将 npm 的全局安装目录设置为一个用户可写的目录，然后将该目录添加到系统路径中。可以通过以下步骤实现：
- 创建一个新的目录用于全局安装 npm 包，例如
mkdir ~/.npm - global。 - 配置 npm 使用这个新目录：
npm config set prefix '~/.npm - global'。 - 将新目录添加到系统路径中，在
~/.bashrc（Linux/macOS）文件中添加以下行：export PATH=~/.npm - global/bin:$PATH，然后运行source ~/.bashrc使配置生效。
通过以上步骤，我们就可以成功地使用 Node.js 安装和搭建 Angular 开发环境，并能够解决在这个过程中可能遇到的一些常见问题，顺利开始 Angular 项目的开发。在实际开发过程中，随着项目的不断深入，我们还会遇到各种其他的技术问题和挑战，但扎实的环境搭建基础是项目成功的第一步。