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