搭建本地开发环境link

Setup for local developmentlink

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

TheQuickStart live-codingQuickStart live-coding / 下载范例example is an Angular playground. It's not where you'd develop a real application. You should develop locally on your own machine ... and that's also how we think you should learn Angular.

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

Setting up a new project on your machine is quick and easy with the QuickStart seed, maintained on github.

请确保你已经安装了 Node.js® 和 npm。

Make sure you have Node.js® and npm installed.

克隆link

Clonelink

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

Perform the clone-to-launch steps with these terminal commands.

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

下载link

Downloadlink

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

Download the QuickStart seed and unzip it into your project folder. Then perform the remaining steps with these terminal commands.

      
        content_copy
      
      cd quickstart
npm install
npm start
    

删除非必需文件（可选）link

Delete non-essential files (optional)link

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

You can quickly delete the non-essential files that concern testing and QuickStart repository maintenance (including all git-related artifacts such as the .git folder and .gitignore!).

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

Open a terminal window in the project folder and enter the following commands for your environment:

OS/X (bash)link

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

Windowslink

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

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

What's in the QuickStart seed?link

《快速上手》种子 包含了与《快速上手》游乐场一样的应用，但是，它真正的目的是提供坚实的本地开发基础。 所以你的电脑里的项目目录里面有更多文件，其中的大部分你都会在稍后学到。

The QuickStart seed contains the same application as the QuickStart playground. But its true purpose is to provide a solid foundation for local development. Consequently, there are many more files in the project folder on your machine, most of which you can learn about later.

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

Focus on the following three TypeScript (.ts) files in the /srcfolder.

      
        content_copy
      
      import { Component } from '@angular/core';

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

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

All guides and cookbooks have at least these core files. Each file has a distinct purpose and evolves independently as the application grows.

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

Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies.

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

Files inside src/ "belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise.

src/ 目录文件详情如下：

The following are all in src/

附录：node 与 npmlink

Appendix: Node.js and npmlink

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

Node.js and the npm package manager are essential to modern web development with Angular and other platforms. Node.js powers client development and build tools. The npm package manager, which is itself a Node.js application, installs JavaScript libraries.

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

Get them now if they're not already installed on your machine.

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

Verify that you are running Node.js v8.x or higher and npm 5.x or higher by running the commands node -v and npm -v in a terminal/console window. Older versions produce errors.

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

We recommend nvm for managing multiple versions of Node.js and npm. You may need nvm if you already have projects running on your machine that use other versions of Node.js and npm.

附录：为何在本地开发link

Appendix: Why develop locallylink

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

Live codingLive coding / 下载范例in the browser is a great way to explore Angular.

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

Links on almost every documentation page open completed samples in the browser. You can play with the sample code, share your changes with friends, and download and run the code on your own machine.

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

The Getting Started shows just the AppComponent file. It creates the equivalent of app.module.ts and main.ts internally for the playground only. so the reader can discover Angular without distraction. The other samples are based on the QuickStart seed.

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

As much fun as this is ...

• 你不能在 Stackblitz 里面发布你的应用

  you can't ship your app in Stackblitz

• 编程时你不可能总是在线

  you aren't always online when writing code

• 在浏览器中编译 TypeScript 很慢

  transpiling TypeScript in the browser is slow

• 只有本地 IDE 有类型支持、代码重构和代码自动完成

  the type support, refactoring, and code completion only work in your local IDE

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

Use thelive codinglive coding / 下载范例environment as a playground, a place to try the documentation samples and experiment on your own. It's the perfect place to reproduce a bug when you want to file a documentation issue or file an issue with Angular itself.

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

For real development, we strongly recommend developing locally.

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

Appendix: develop locally with IElink

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

If you develop angular locally with ng serve, there will be websocket connection being setup automatically between browser and local dev server, so when your code change, browser can automatically refresh.

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

In windows, by default one application can only have 6 websocket connections, MSDN WebSocket Settings. So if IE was refreshed manunally or automatically by ng serve, sometimes, the websocket will not close properly, when websocket connections exceed limitations, SecurityError will be thrown, this error will not affect the angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.

附录：使用 fakeAsync()/async() 进行测试link

Appendix: test using fakeAsync()/async()link

如果你使用 fakeAsync()/async() 辅助函数来运行单元测试（详情参见测试指南），就要在测试的准备文件中导入 zone.js/dist/zone-testing。

If you use the fakeAsync()/async() helper function to run unit tests (for details, read testing guide), you need to import zone.js/dist/zone-testing in your test setup file.

在以前版本的 Angular 中，下列文件曾被导入或添加到 html 文件中：

And in the earlier versions of Angular, the following files were imported or added in your html file:

      
        content_copy
      
      import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
    

你仍然可以分别导入这些文件，不过导入顺序很重要，你必须在 sync-test、async-test、fake-async-test 和 jasmine-patch 之前导入 proxy。还要注意在 jasmine-patch 之前导入sync-test。所以，建议你只导入 zone-testing 而不要分别加载那些文件。

You can still load those files separately, but the order is important, you must import proxy before sync-test, async-test, fake-async-test and jasmine-patch. And you also need to import sync-test before jasmine-patch, so it is recommended to just import zone-testing instead of loading those separated files.