MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Angular CLI安装全流程指南

2025-01-023.3k 阅读

1. 前置条件

在开始安装 Angular CLI 之前，需要确保你的开发环境满足以下几个条件：

1.1 安装 Node.js

Angular CLI 是基于 Node.js 构建的，所以首先要在你的系统上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许你在服务器端运行 JavaScript 代码。

  • 下载 Node.js：
    • 打开你的浏览器，访问 Node.js 的官方网站 https://nodejs.org/。
    • 在网站上，你会看到有两个主要的下载版本：长期支持（LTS）版本和最新版本。推荐下载 LTS 版本，因为它更加稳定，适合生产环境使用。
    • 点击对应的下载按钮，下载适合你操作系统的安装包（.msi 用于 Windows，.pkg 用于 macOS，各种 Linux 发行版有对应的安装方式）。
  • 安装 Node.js：
    • Windows：运行下载的.msi 文件，按照安装向导的提示进行操作。在安装过程中，你可以选择安装路径等选项，一般保持默认设置即可。安装完成后，打开命令提示符（CMD）或 PowerShell，输入 node -v 命令，如果显示 Node.js 的版本号，说明安装成功。
    • macOS：运行下载的.pkg 文件，按照安装向导的提示完成安装。安装完成后，打开终端，输入 node -v 命令，若显示版本号，则安装成功。
    • Linux：不同的 Linux 发行版安装方式略有不同。以 Ubuntu 为例，你可以在终端中运行以下命令来安装 Node.js：
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

上述命令首先添加 Node.js 的官方软件源，然后通过 apt-get 命令安装 Node.js。安装完成后，同样通过 node -v 命令验证安装。

1.2 安装 npm

npm（Node Package Manager）是 Node.js 的默认包管理器，随着 Node.js 的安装会一同安装。npm 用于安装、管理和分享 Node.js 包。你可以通过以下命令检查 npm 的版本：

npm -v

如果需要更新 npm 到最新版本，可以运行以下命令：

npm install -g npm

-g 标志表示全局安装，这样 npm 可以在系统的任何位置使用。

2. 安装 Angular CLI

在满足前置条件后，就可以开始安装 Angular CLI 了。

2.1 使用 npm 安装

安装 Angular CLI 最常见的方式是使用 npm。在命令行中运行以下命令：

npm install -g @angular/cli

这里 -g 选项表示全局安装，这样在系统的任何目录下都可以使用 ng 命令（Angular CLI 的命令前缀）。安装过程可能需要一些时间，因为 npm 需要下载并安装 Angular CLI 及其所有依赖包。

2.2 安装过程中可能遇到的问题及解决方法

  • 权限问题（尤其是在 Linux 和 macOS 上）：
    • 如果在安装过程中遇到权限不足的错误，例如 “EACCES: permission denied”，这通常是因为你没有足够的权限在全局范围内安装包。解决方法是使用 sudo 命令来提升权限：
sudo npm install -g @angular/cli

但是，长期使用 sudo 安装 npm 包可能会导致权限问题。更好的解决办法是为 npm 设置一个非全局的安装路径，具体步骤如下： - 创建一个目录用于存放全局安装的 npm 包，例如：

mkdir ~/.npm - global

- 设置 npm 的全局前缀：

npm config set prefix '~/.npm - global'

- 将 `~/.npm - global/bin` 添加到你的 `PATH` 环境变量中。在 Linux 和 macOS 上，可以编辑 `.bashrc` 或 `.zshrc` 文件（根据你使用的 shell 而定），添加以下行：

export PATH = ~/.npm - global/bin:$PATH

然后运行 source ~/.bashrc 或 source ~/.zshrc 使更改生效。之后，你就可以不用 sudo 来全局安装 npm 包了：

npm install -g @angular/cli
  • 网络问题：
    • 如果安装过程因为网络问题中断，例如超时等，可以尝试更换 npm 源。npm 默认使用官方源，在国内可能下载速度较慢。你可以使用淘宝的 npm 镜像源，通过以下命令切换：
npm config set registry https://registry.npm.taobao.org

切换后再次尝试安装 Angular CLI：

npm install -g @angular/cli

安装完成后，如果你想恢复使用官方源，可以运行：

npm config set registry https://registry.npmjs.org
  • 版本兼容性问题：
    • Angular CLI 与 Angular 框架本身有版本兼容性要求。如果你安装的 Angular CLI 版本与你项目所需的 Angular 版本不兼容，可能会导致各种问题。在安装 Angular CLI 时，建议参考 Angular 的官方文档，查看推荐的版本对应关系。例如，如果你要创建一个基于 Angular 12 的项目，最好安装与之兼容的 Angular CLI 版本。你可以在 Angular 官方文档 中找到版本对应关系。如果已经安装了不兼容的版本，可以通过以下命令卸载并重新安装正确版本：
npm uninstall -g @angular/cli
npm install -g @angular/cli@<desired - version>

将 <desired - version> 替换为你需要的版本号，例如 12.2.10。

3. 验证 Angular CLI 安装

安装完成后，需要验证 Angular CLI 是否安装成功。在命令行中运行以下命令：

ng --version

该命令会显示 Angular CLI 的版本号，以及与之相关的 Angular 核心包和其他依赖的版本信息。例如，输出可能如下：

Angular CLI: 12.2.10
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.2.10
... animations, cli, common, compiler, compiler - cli, core, forms
... platform - browser, platform - browser - dynamic, router

Package                         Version
---------------------------------------------------------
@angular - class - validator       12.2.5
@angular - devkit/architect     0.1202.10
@angular - devkit/build - angular 12.2.10
@angular - devkit/core          12.2.10
@angular - devkit/schematics    12.2.10
@angular - material             12.2.5
@schematics/angular             12.2.10
rxjs                            6.6.7
typescript                      4.3.5

如果显示类似的版本信息，说明 Angular CLI 安装成功。

4. 创建第一个 Angular 项目

验证安装成功后，就可以使用 Angular CLI 创建一个新的 Angular 项目了。

4.1 使用 ng new 命令创建项目

在命令行中，导航到你希望创建项目的目录，例如桌面：

cd Desktop

然后运行以下命令创建一个新的 Angular 项目，假设项目名为 my - first - app：

ng new my - first - app

ng new 命令会引导你完成项目的初始化设置，包括选择是否使用 Angular Router（用于路由功能）、选择 CSS 预处理器（如 Sass、Less 等）。例如：

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE my - first - app/angular.json (3966 bytes)
CREATE my - first - app/package.json (1305 bytes)
CREATE my - first - app/README.md (1027 bytes)
CREATE my - first - app/tsconfig.json (826 bytes)
CREATE my - first - app/.editorconfig (245 bytes)
CREATE my - first - app/.gitignore (631 bytes)
CREATE my - first - app/src/favicon.ico (948 bytes)
CREATE my - first - app/src/index.html (292 bytes)
CREATE my - first - app/src/main.ts (370 bytes)
CREATE my - first - app/src/polyfills.ts (2834 bytes)
CREATE my - first - app/src/styles.css (80 bytes)
CREATE my - first - app/src/test.ts (743 bytes)
CREATE my - first - app/src/assets/.gitkeep (0 bytes)
CREATE my - first - app/src/environments/environment.prod.ts (51 bytes)
CREATE my - first - app/src/environments/environment.ts (662 bytes)
CREATE my - first - app/src/app/app.component.css (0 bytes)
CREATE my - first - app/src/app/app.component.html (2579 bytes)
CREATE my - first - app/src/app/app.component.spec.ts (943 bytes)
CREATE my - first - app/src/app/app.component.ts (287 bytes)
CREATE my - first - app/src/app/app.module.ts (314 bytes)
CREATE my - first - app/e2e/protractor.conf.js (752 bytes)
CREATE my - first - app/e2e/tsconfig.json (353 bytes)
CREATE my - first - app/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE my - first - app/e2e/src/app.po.ts (208 bytes)
Installing packages for tooling via npm.
npm WARN deprecated source - map - url@0.4.1: See https://github.com/lydell/source - map - url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve - url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
added 1654 packages in 74s

上述过程中，首先询问是否添加 Angular 路由，选择了 “Yes”，然后询问样式表格式，选择了 “CSS”。接着，Angular CLI 会创建项目的基本结构，并通过 npm 安装项目所需的依赖包。

4.2 项目结构解析

创建的 Angular 项目具有特定的目录结构：

  • src 目录：这是项目的源代码目录，包含应用程序的主要代码。
    • app 目录：存放应用程序的组件、模块等核心代码。例如，app.component.ts 是应用程序的根组件，app.module.ts 是应用程序的根模块。
    • assets 目录：用于存放静态资源，如图像、字体等。在 index.html 中可以通过相对路径引用这些资源。
    • environments 目录：包含不同环境下的配置文件，如 environment.ts 用于开发环境配置，environment.prod.ts 用于生产环境配置。这些文件通常用于配置 API 地址等环境相关的参数。
    • styles.css：全局样式文件，应用于整个应用程序。
    • main.ts：应用程序的入口文件，在这里 Angular 启动并引导应用程序。
    • index.html：应用程序的主 HTML 文件，是浏览器加载的第一个文件，它包含一个用于挂载 Angular 应用的 <app - root> 标签。
  • e2e 目录：用于端到端（End - to - End）测试的代码。protractor.conf.js 是 Protractor（一个用于 Angular 应用的端到端测试框架）的配置文件。
  • angular.json：这是项目的配置文件，包含项目的各种设置，如构建配置、开发服务器配置、样式配置等。
  • package.json：记录项目的依赖包信息，以及一些脚本命令。例如，scripts 字段中定义了 start、build、test 等常用命令，通过 npm run <script - name> 可以执行这些命令。

5. 启动 Angular 开发服务器

创建项目后，可以启动 Angular 开发服务器来查看项目的运行效果。在项目目录中运行以下命令：

cd my - first - app
ng serve

ng serve 命令会启动一个开发服务器，默认监听在 http://localhost:4200。你可以在浏览器中访问该地址，就能看到你新创建的 Angular 应用。在开发过程中，如果你对项目代码进行修改，开发服务器会自动检测到变化并实时刷新浏览器，方便你进行开发和调试。例如，你可以打开 src/app/app.component.html 文件，修改其中的 HTML 内容，保存文件后，浏览器会立即显示修改后的效果。

6. 生成组件、服务等 Angular 元素

Angular CLI 提供了便捷的命令来生成各种 Angular 元素，如组件、服务、指令等。

6.1 生成组件

组件是 Angular 应用的基本构建块，用于封装视图和相关逻辑。要生成一个新的组件，在项目目录中运行以下命令，假设组件名为 new - component：

ng generate component new - component

或者使用简写形式：

ng g c new - component

Angular CLI 会在 src/app 目录下创建一个新的 new - component 目录，并生成以下文件：

  • new - component.component.ts：组件的 TypeScript 类，包含组件的逻辑代码，如属性、方法等。
  • new - component.component.html：组件的模板文件，定义组件的视图结构。
  • new - component.component.css：组件的样式文件，用于定义组件的样式。
  • new - component.component.spec.ts：组件的单元测试文件，用于编写组件的测试用例。

6.2 生成服务

服务用于封装应用程序的业务逻辑，如数据获取、存储等。要生成一个新的服务，在项目目录中运行以下命令，假设服务名为 data - service：

ng generate service data - service

或者简写为：

ng g s data - service

Angular CLI 会在 src/app 目录下生成一个 data - service.ts 文件，用于编写服务的逻辑。例如，如果你要创建一个用于获取用户数据的服务，可以在 data - service.ts 文件中编写如下代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<any> {
    return this.http.get('/api/users');
  }
}

上述代码中，使用 @angular/common/http 模块中的 HttpClient 来发送 HTTP 请求获取用户数据。@Injectable 装饰器用于标记该类为可注入的服务，providedIn: 'root' 表示该服务在应用程序的根模块中提供。

6.3 生成指令

指令用于扩展 HTML 的功能，如添加自定义行为、属性等。要生成一个新的指令，在项目目录中运行以下命令，假设指令名为 highlight - directive：

ng generate directive highlight - directive

或简写为：

ng g d highlight - directive

Angular CLI 会在 src/app 目录下生成 highlight - directive.directive.ts 文件。例如，以下是一个简单的指令示例，用于给元素添加背景颜色：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

在上述代码中，@Directive 装饰器定义了指令的选择器 [appHighlight]，表示在 HTML 中使用 appHighlight 属性来应用该指令。@HostListener 装饰器用于监听元素的鼠标事件，当鼠标进入和离开元素时，分别调用 highlight 方法来改变元素的背景颜色。

7. 构建 Angular 项目用于生产环境

当开发完成后，需要将 Angular 项目构建为生产版本，以便部署到服务器上。在项目目录中运行以下命令：

ng build --prod

--prod 标志表示构建生产版本，这个版本会进行代码压缩、优化等操作，以减小文件体积，提高加载性能。构建完成后，会在项目根目录下生成一个 dist 目录，其中包含构建后的文件，这些文件可以直接部署到 Web 服务器上。例如，如果你使用的是 Apache 服务器，可以将 dist 目录下的内容复制到 Apache 的 htdocs 目录（或相应的网站根目录）。

8. 常见 Angular CLI 命令总结

  • ng new：创建一个新的 Angular 项目。
  • ng serve：启动开发服务器，用于在开发过程中查看应用的运行效果。
  • ng generate（或 ng g）：生成各种 Angular 元素，如组件（component 或 c）、服务（service 或 s）、指令（directive 或 d）等。
  • ng build：构建 Angular 项目，--prod 标志用于构建生产版本。
  • ng test：运行项目的单元测试，使用 Karma 和 Jasmine 框架。
  • ng e2e：运行项目的端到端测试，使用 Protractor 框架。
  • ng lint：检查代码是否符合编码规范，使用 ESLint。

通过掌握这些 Angular CLI 命令，你可以更加高效地开发 Angular 应用程序。无论是创建项目、生成组件，还是构建和测试应用，Angular CLI 都提供了便捷的工具和流程。在实际开发中，根据项目的需求和开发阶段，合理运用这些命令，能够大大提高开发效率和代码质量。