Angular 2 实验1:Windows 7上安装执行环境
来源:互联网 发布:网络远程教育专升本 编辑:程序博客网 时间:2024/06/05 10:05
2017-04-12 补充说明:
默认安装了 python-2.7.13.amd64.msi 之后,执行下面的命令,提示【VCBuild.exe】不存在,要求
npm install
提示错误:
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]
解决方法,==管理员权限==下执行命令:
npm install --global --production windows-build-tools
该命令会安装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 -vnpm -v
分别显示下面的版本号,说明安装成功。
v6.10.23.10.10
- 修改npm镜像
为了提升下载的速度,改用淘宝的npm镜像。
备注:网络限制不允许访问淘宝,这一步未实验成功,但不影响后续的安装和执行。
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装typescript
npm install -g typescript typings
- 手工配置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"
- 安装angular-cli:
npm install -g @angular/cli
安装过程中,会提示Python找不到的错误,没什么特别的影响,可以无视。
验证是否安装成功:
ng version
提示版本信息:
@angular/cli: 1.0.0node: 6.10.2os: win32 x64
第二步,新建Hello工程
执行命令,将新建一个【angular2-hello】工程目录:
ng new angular2-hello
成功执行将提示下面的信息:
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.jsonInstalling packages for tooling via npm.Installed packages for tooling via npm.Project 'angular2-hello' successfully created.
继续执行命令:
ng serve
构建成功的信息如下:
** NG Live Development Server is running on http://localhost:4200 **Hash: 7b19a0e5ee6ced4bbc15Time: 10834mschunk {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.
在浏览器【Chrome 56】中输入【http://localhost:4200】,页面上将显示:
app works!
实验用的浏览器推荐使用最新版的Chrome,如果页面上只显示【Loading…】,说明该浏览器对 Angular 2 支持的还不够。
修改【angular2-hello/app/app.component.html】文件如下,
<h1> {{title}}</h1><p>这是我的第一个Angular2程序。</p>
浏览器上马上显示成:
app works!这是我的第一个Angular2程序。
至此,一个最简单的Angular2工程就建立成功了。
其他可以实验的工程
- angular2-seed,下载地址:https://github.com/angular/angular2-seed
按照作者提供的操作说明,可以构建成功并执行。
参考文档
- https://angular.io/docs/ts/latest/cli-quickstart.html
- 用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
- Angular 2 实验1:Windows 7上安装执行环境
- windows上kafka环境安装
- angular环境安装
- 实验环境安装CenOS 7
- 在windows 7上安装配置ruby on rails环境
- Windows 上安装Android开发环境
- 在windows上安装PHP开发环境
- 在windows上安装Grails开发环境
- Angular 环境安装与配置
- 实验1 Windows汇编语言开发环境
- Windows 8 Rp 上安装 Windows Phone 开发环境
- openCobol 安装 windows下cobol执行环境做成
- 如何在Windows上安装配置Java环境安装jdk
- Angular ng-book2学习关于Angular-cli环境安装
- windows phone 7环境安装
- windows 7上安装django
- Windows 7 上安装 Mapnik
- windows 7 home basic 上安装iis 和php运行环境
- TLS协议分析 (二) 架构总览
- gethostbyname()函数说明
- MIUI8上在Android Studio运行出错集及其解决方案
- Tomcat启动错误
- RocketMQ最佳实践(一)4.0版本/概念介绍/安装调试/客户端demo
- Angular 2 实验1:Windows 7上安装执行环境
- POJ_1236
- 硬件编码工具简介
- 解析struct sockaddr_ll获得混杂模式
- Jquery 复选框操作全
- 两个栈实现对列
- request.getParameter() 和request.getAttribute() 区别
- Eclipse开发JAVA WEB中遇到提示Target runtime Apache Tomcat ... is not defined.的问题,解决方法
- 让一个按钮一直不停的旋转