使用Angular CLI进行Build(构建)和Serve详解

使用Angular CLI进行Build(构建)和Serve是开发Angular应用程序时必不可少的步骤，下面是详细的攻略：

什么是Angular CLI

Angular CLI是一组用于Angular应用程序的命令行工具，可以帮助我们快速创建、构建和测试Angular项目，大大提高开发效率。

安装Angular CLI

使用Angular CLI之前，我们需要先安装它。可以使用以下命令行在全局安装：

npm install -g @angular/cli

创建新的Angular项目

安装完成后，我们就可以创建新的Angular项目了。进入到想要创建项目的目录下，执行以下命令：

ng new my-app

其中“my-app”为项目名称，可以替换为自己想要的项目名称。

运行Angular项目

在创建完项目之后，我们可以使用以下命令在本地运行Angular应用程序：

ng serve

执行完上述命令后，Angular CLI将会启动一个默认端口为4200的http服务器，我们可以通过浏览器访问 http://localhost:4200 来查看我们的应用程序。

构建Angular项目

在开发完Angular应用程序后，我们需要将它构建成静态资源并且发布到生产环境。我们可以使用以下命令来构建项目：

ng build

执行完以上命令后，Angular CLI将会构建我们的应用程序，并且生成一系列静态文件，这些文件将会被打包到dist目录下。我们可以使用以下命令来启动这些静态文件：

ng serve

这个命令会起一个http服务器，它将会运行我们的应用程序。

示例说明

下面给出两个简单的例子来说明如何使用Angular CLI进行Build(构建)和Serve：

例子1：创建新的项目并且运行

1. 打开终端窗口，进入到项目存放目录

2. 执行以下命令

ng new my-project

创建一个名为“my-project”的新项目

1. 切换到项目所在目录

cd my-project

1. 启动项目

ng serve

执行完上述命令后，Angular CLI将会启动一个默认端口为4200的http服务器，我们可以通过浏览器访问 http://localhost:4200 来查看我们的应用程序。

例子2：构建Angular项目并且在生产环境中运行

1. 打开终端窗口，进入到项目存放目录

2. 执行以下命令

ng build --prod

执行完上述命令后，Angular CLI将会构建我们的应用程序，并且生成一系列静态文件，这些文件将会被打包到dist目录下。

1. 进入到dist目录

cd dist

1. 启动http服务器

http-server

执行完上述命令后，一个http服务器将会运行在默认端口8080上，我们可以使用浏览器访问http://localhost:8080来查看我们的应用程序。