使用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:创建新的项目并且运行
-
打开终端窗口,进入到项目存放目录
-
执行以下命令
ng new my-project
创建一个名为“my-project”的新项目
- 切换到项目所在目录
cd my-project
- 启动项目
ng serve
执行完上述命令后,Angular CLI将会启动一个默认端口为4200的http服务器,我们可以通过浏览器访问 http://localhost:4200 来查看我们的应用程序。
例子2:构建Angular项目并且在生产环境中运行
-
打开终端窗口,进入到项目存放目录
-
执行以下命令
ng build --prod
执行完上述命令后,Angular CLI将会构建我们的应用程序,并且生成一系列静态文件,这些文件将会被打包到dist目录下。
- 进入到dist目录
cd dist
- 启动http服务器
http-server
执行完上述命令后,一个http服务器将会运行在默认端口8080上,我们可以使用浏览器访问http://localhost:8080来查看我们的应用程序。