搭建本地开发环境

《快速上手》在线编程 / 下载范例例子是 Angular 的游乐场。它不是开发真实应用的地方。你应该在自己的电脑上本地开发... 你也应该在本地环境学习 Angular。

利用 github 上的《快速上手》种子在你的电脑上搭建一个新项目是很快很容易的。

确定你已经安装了 Node.js? 和 npm。

克隆

运行下列命令来执行克隆并启动步骤。

content_copygit clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start

在Bash for Windows中 npm start 可能会失败，因为到 2017-01 为止它还不支持访问网络上的服务器。

下载

下载《快速上手》种子并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。

content_copycd quickstart
npm install
npm start

在Bash for Windows中 npm start 可能会失败，因为到 2017-01 为止它还不支持访问网络上的服务器。

删除非必需文件（可选）

你可以快速删除一些涉及到测试和维护快速开始版本库的 非必需 文件（包括所有 git 相关的文件如 .git 文件夹和 .gitignore！）。

请只在开始时执行此删除操作，以防你自己的测试和 git 文件被意外删除！

在项目目录下打开一个终端窗口，并根据你的操作系统执行以下命令：

OS/X (bash)

content_copyxargs rm -rf < non-essential-files.osx.txt
rm src/app/*.spec*.ts
rm non-essential-files.osx.txt

Windows

content_copyfor /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

《快速上手》种子库里都有什么？

《快速上手》种子 包含了与《快速上手》游乐场一样的应用，但是，它真正的目的是提供坚实的本地开发基础。所以你的电脑里的项目目录里面有更多文件，参见搭建剖析。

注意/src目录中以下三个 TypeScript (.ts) 文件：

src

app

app.component.ts

app.module.ts

main.ts

src/app/app.component.ts

src/app/app.module.ts

src/main.ts

content_copyimport { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

所有指南和烹饪书都至少有这几个核心文件。每个文件都有独特的用途，并且随着应用的成长各自独立演变。

src/ 目录之外的文件为构建、部署和测试 app 相关的文件，他们只包括配置文件和外部依赖。

src/ 目录下的文件才“属于”你的 app。除非明确指出，否则教程中添加的 TypeScript，HTML 和 CSS 文件都在 src/ 目录下，大多数在 src/app目录中。

src/ 目录文件详情如下：

文件	用途
app/app.component.ts	定义与《快速上手》游乐场同样的?AppComponent。它是根组件，随着应用的演变，它将变成一颗嵌套组件树。
app/app.module.ts	定义?AppModule，根模块为 Angular 描述如何组装应用。目前，它只声明了?AppComponent。不久，它将声明更多组件。
main.ts	使即时 (JIT) 编译器用编译应用并且在浏览器中启动并运行应用。对于大多数项目的开发，这都是合理的选择。而且它是在像 Stackblitz 这样的在线编程环境中运行例子的唯一选择。你将在本文档中学习其他编译和开发选择。

下一步

如果你是 Angular 初学者，建议跟着教程学习。

附录：node 与 npm

Node.js 和 npm 包管理器对使用 Angular 和其他平台进行现代网络开发是至关重要的。 Node.js 用来支持客户端开发和构建工具。npm 包管理器本身就是一个 Node.js 应用，用于安装 JavaScript 库。

如果你的电脑没有安装它们，请现在安装。

在终端/控制器窗口运行命令 node -v 和 npm -v，来确认你运行的 Node.js 是 v8.x 或更高，npm 为 5.x 或更高。 老版本会产生错误。

我们推荐使用 nvm 来管理多版本 Node.js 和 npm。如果你的电脑上已经有使用其他版本 Node.js 和 npm 的项目，你可能需要 nvm。

附录：为何在本地开发

在浏览器中在线编程 / 下载范例是很好的探索 Angular 的方法。

几乎每章文档里面的链接都在浏览器中打开完整的例子。你可以用这些代码做实验，或者与朋友共享你的修改，或者下载并在你自己的电脑上运行这些代码。

快速上手仅仅展示了 AppComponent 文件。它在内部创建了只为游乐场而准备的等价 app.module.ts 和 main.ts。所以读者可以在零干扰的情况下探索 Angular。其他例子是基于《快速上手》种子的。

虽然有这么多的乐趣，但是...

你不能在 Stackblitz 里面发布你的应用
编程时你不可能总是在线
在浏览器中编译 TypeScript 很慢
只有本地 IDE 有类型支持、代码重构和代码自动完成

把在线编程 / 下载范例环境当做游乐场，一个尝试文档例子和自己做实验的地方。当你想要提交关于文档的问题或者提交关于 Angular 自身的问题时，它是重现错误的完美地方。

对于现实项目开发，我们强烈推荐在本地开发。

附录：使用 IE 进行本地开发

如果你使用 ng serve 进行本地开发，就会在浏览器和本地开发服务器之间自动建立一个 WebSocket 连接，因此，当你的代码变化时，浏览器也会自动刷新。

在 Windows 中，默认情况下一个应用只能有六个 WebSocket 连接，参见 MSDN 中的 WebSocket 设置部分。所以，如果 IE 手动刷新或被 ng serve 触发了自动刷新，有时候 WebSocket 可能无法正常关闭，当 WebSocket 的连接数超限时，就会抛出 SecurityError 异常。请放心，这个异常对 Angular 应用没什么影响，你重启一下 IE 就能消除这个错误，或者修改 Windows 注册表来修改这个上限。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-08-28