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方式）