Angular CLI 是 Angular 官方提供的命令行工具，它可以帮助我们快速创建基于 Angular 的项目，并提供了丰富的脚手架和工具来简化开发流程。本篇文章将详细介绍如何使用 Angular CLI 初始化项目，并对其中涉及到的概念进行深入解析。
安装 Angular CLI
在使用 Angular CLI 之前，我们需要先安装它。可以通过以下命令来安装最新版本的 Angular CLI：
npm install -g @angular/cli
初始化项目
安装完成后，我们可以使用 ng new 命令来初始化一个新的 Angular 项目：
ng new my-app
这个命令会在当前目录下创建一个名为 my-app 的新项目，并自动安装所需的依赖。在初始化过程中，Angular CLI 会询问我们一些问题，例如要不要使用路由、要不要使用 SCSS 等等，我们可以根据自己的需求进行选择。
项目结构
初始化完成后，我们可以看到项目的目录结构如下：
// javascriptcn.com 代码示例 my-app/ ├── e2e/ ├── node_modules/ ├── src/ │ ├── app/ │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets/ │ ├── environments/ │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── .angular.json ├── .editorconfig ├── .gitignore ├── angular.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json
其中，src 目录是我们主要关注的部分，它包含了应用程序的源代码和资源文件。app 目录中的文件是我们应用程序的主要组成部分，app.module.ts 是应用程序的根模块，app.component.ts 则是应用程序的根组件。
运行应用
初始化完成后，我们可以使用 ng serve 命令来启动开发服务器，并在浏览器中查看应用程序：
cd my-app ng serve --open
这个命令会启动一个开发服务器，并自动打开浏览器，访问 http://localhost:4200 可以看到应用程序的运行效果。
构建应用
当应用程序开发完成后，我们可以使用 ng build 命令来构建应用程序的发布版本：
ng build --prod
这个命令会在 dist 目录下生成一个发布版本的应用程序。我们可以将生成的文件上传到服务器上，然后通过浏览器访问应用程序。
总结
Angular CLI 提供了丰富的脚手架和工具来简化 Angular 应用程序的开发流程。本文介绍了如何使用 Angular CLI 初始化项目，并对其中涉及到的概念进行了深入解析。希望本文对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65053ad695b1f8cacd1bded1