Angular 2 实验1：Windows 7上安装执行环境

2017-04-12 补充说明：

默认安装了 python-2.7.13.amd64.msi 之后，执行下面的命令，提示【VCBuild.exe】不存在，要求

npm install

• 1

提示错误：

  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Studio 2005
；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。 [E:\study-web\angular2-sample\node_modules\node-sass\build\binding.sln]

• 1
• 2

解决方法，==管理员权限==下执行命令：

npm install --global --production windows-build-tools

• 1

该命令会安装Build所需的所有命令，也包括了【python】，也就是说有了这个命令，可以不用自己安装【python】了。

安装成功后，再执行【npm install】就没有错误了。

第一步，安装执行环境

• 安装 Nodejs 的 Windows 版本

下载Nodejs的Windows版本：https://nodejs.org/dist/v6.10.2/node-v6.10.2-x64.msi

选择默认安装，安装路径为【C:\Program Files\nodejs\】。

验证是否安装成功：

node -v

npm -v

• 1
• 2
• 3

分别显示下面的版本号，说明安装成功。

v6.10.2

3.10.10

• 1
• 2
• 3

• 修改npm镜像

为了提升下载的速度，改用淘宝的npm镜像。

备注：网络限制不允许访问淘宝，这一步未实验成功，但不影响后续的安装和执行。

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 1

• 安装typescript

npm install -g typescript typings

• 1

• 手工配置node-sass

下载：https://github.com/sass/node-sass/releases/download/v4.5.2/win32-x64-51_binding.node，存放路径为【C:\win32-x64-51_binding.node】。

执行配置命令：

npm config set sass_binary_path "C:\win32-x64-51_binding.node"

• 1

• 安装angular-cli：

npm install -g @angular/cli

• 1

安装过程中，会提示Python找不到的错误，没什么特别的影响，可以无视。

验证是否安装成功：

ng version

• 1

提示版本信息：

@angular/cli: 1.0.0
node: 6.10.2
os: win32 x64

• 1
• 2
• 3

第二步，新建Hello工程

执行命令，将新建一个【angular2-hello】工程目录：

ng new angular2-hello

• 1

成功执行将提示下面的信息：

installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project ‘angular2-hello‘ successfully created.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

继续执行命令：

ng serve

• 1

构建成功的信息如下：

** NG Live Development Server is running on http://localhost:4200 **
Hash: 7b19a0e5ee6ced4bbc15
Time: 10834ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.69 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

在浏览器【Chrome 56】中输入【http://localhost:4200】，页面上将显示：

app works!

• 1

实验用的浏览器推荐使用最新版的Chrome，如果页面上只显示【Loading…】，说明该浏览器对 Angular 2 支持的还不够。

修改【angular2-hello/app/app.component.html】文件如下，

h1>
  {{title}}
h1>
p>这是我的第一个Angular2程序。p>

• 1
• 2
• 3
• 4

浏览器上马上显示成：

app works!

这是我的第一个Angular2程序。

• 1
• 2
• 3

至此，一个最简单的Angular2工程就建立成功了。

其他可以实验的工程

1. angular2-seed，下载地址：https://github.com/angular/angular2-seed 
   按照作者提供的操作说明，可以构建成功并执行。

参考文档

1. https://angular.io/docs/ts/latest/cli-quickstart.html
2. 用WebStorm进行Angularjs 2开发（环境篇：Windows 10，Angular-cli方式）