首先，让我们讨论如何构建Angular应用程序，运行它并在浏览器中预览它。我们可以使用Angular提供的CLI轻松完成操作。 CLI是一种命令行界面工具，开发人员可以使用它来初始化应用程序，对其进行开发，支持和高效维护，而面临的挑战则更少。并非总是需要CLI来开发Angular中的应用程序，但绝对可以为开发人员提供高质量的工具集，以使代码更令人印象深刻并节省时间。
CLI的重点：
- 创建一个新的Angular应用程序。
- 运行具有LiveReload支持的开发服务器以在开发过程中预览您的应用程序。
- 向现有的Angular应用程序添加不同的功能。
- 运行应用程序的单元测试。
- 运行应用程序的端到端(E2E)测试。
- 构建用于部署到生产的应用程序。
让我们构建第一个Angular应用程序。一些先决条件如下：
- Node.js 6.9.0
- npm 3.0.0或更高版本
安装：要安装Angular CLI，请在命令提示符下运行以下命令，这将在您的系统中安装ng。
$ npm install -g @angular/cli 要检查版本，我们将编写以下命令-
$ ng version 这将提供您已安装的版本。
@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64创建一个新的应用程序：要在开发服务器上构建并服务新的Angular项目，请转到新工作区的父目录并使用以下命令：
$ ng new my-first-Angular-application 此ng new命令将在当前工作目录下创建一个新文件夹，所有源文件和新Angular应用程序的目录都是基于您指定的名称“ my-first-Angular-application”创建的。已安装npm依赖项。请注意，您要创建的所有文件都可以在文件夹中创建。如果当前工作目录不适用于您的项目，则可以通过运行cd将其更改为另一个目录。
要在浏览器中预览新应用程序，请导航至其目录：
$ cd my-first-Angular-application并运行：
$ ng serve在浏览器中，打开http：// localhost：4200 /以查看my-first-Angular-application的结果。使用ng serve命令构建应用程序并在本地提供服务时，服务器会自动重建应用程序，并在您更改任何源文件时重新加载页面。创建，构建和运行Angular应用程序就是这么简单。
现在出现了主要问题，为什么我们需要允许从外部访问本地主机?
答案是我们通常会根据开发人员的需求使用不止一台设备或计算机来运行我们的应用程序。这将使我们的工作效率更高，也可以节省很多时间。为了允许从外部访问localhost，我们对ng serve注释进行了简单的修改，我们之前已经看到过。
$ ng serve --host 0.0.0.0然后键入192.168.xx：4200以从另一台计算机获得访问权限。 xx代表IP地址中的最后两个点分十进制数字。另外，您可以简单地输入-
$ ng serve --host 192.168.X.X如果仍然无法访问192.168.XX：4200，则说明您所在的网络可能已启用防火墙保护。禁用保护，然后再次检查。
Angular CLI | Angular项目设置