怎么在Angular中使用AngularCLI

怎么在Angular中使用Angular CLI？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司主打移动网站、网站设计制作、成都网站建设、网站改版、网络推广、网站维护、主机域名、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

具体的命令是：

yarn global add @angular/cli

参数 global 说明是在全局安装； add 说明是在“添加”；最后是 CLI 的包名，没有注明版本好的话，会让 yarn 安装最新版的 CLI。。这一语句与之前 NPM 的

npm install -g @angular/cli

是等价的。

之后我们运行

ng version

如果能够输出 Angular CLI 的版本号，说明安装成功。注意，Angular CLI 的所有命令都是以 ng 开始的。

Angular CLI 建立在 webpack 基础之上，可以帮助我们生成 Angular 项目框架，生成 Angular 模块、组件、指令等。如果手动搭建这一开发环境，需要了解 webpack 的各种细节、编写各种自动化脚本等，要求较高的前端开发技术。考虑到我们的基础教程，使用 CLI 辅助开发无疑是合适的。我们会在后面的章节中详细介绍 Angular CLI 的使用，如果你对 Angular CLI 感兴趣，可以通过其官方网站 了解更多的细节。

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn，只需运行下面的命令：

ng set --global packageManager=yarn

反之，如果想换回 NPM，只需使用

ng set --global packageManager=npm

即可。

安装好 Angular CLI，下面我们来创建第一个示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

创建一个演示项目。 new 是创建一个全新项目，后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后，Angular CLI 会自动运行 yarn install ，这是在安装项目所需要的各种依赖。安装过程会比较漫长，需要耐心等待一段时间。

当出现类似上面的界面，提示“Projecy ‘demo' successfully created”时，表示项目已经创建完成。如果有错误，需要检查安装过程或者网络连接等。

项目创建完毕，会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录

cd demo

然后运行

ng serve

ng serve 命令会编译项目，然后启动一个内置的小型服务器，我们就可以通过浏览器查看项目的运行结果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是说，这个服务器的地址应该是 http://localhost:4200，我们只要用浏览器访问这个地址即可：

可以看到 Angular CLI 默认生成的项目页面的运行结果。

注意，这一内置服务器仅适用于开发测试用，并不能作为实际使用的服务器。因此，我们如果要部署到正式的服务器，需要将项目编译成一个发布版。编译发布版也很简单，只需使用一条命令：

ng build --prod

看完上述内容，你们掌握怎么在Angular中使用Angular CLI的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！