Angular 2 实验1:Windows 7上安装执行环境
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-webangular2-samplenode_modulesnode-sassbuildbinding.sln]
解决方法,==管理员权限==下执行命令: npm install --global --production windows-build-tools
该命令会安装Build所需的所有命令,也包括了【python】,也就是说有了这个命令,可以不用自己安装【python】了。 安装成功后,再执行【npm install】就没有错误了。 第一步,安装执行环境
下载Nodejs的Windows版本:https://nodejs.org/dist/v6.10.2/node-v6.10.2-x64.msi 选择默认安装,安装路径为【C:Program Filesnodejs】。 验证是否安装成功: node -v
npm -v
分别显示下面的版本号,说明安装成功。 v6.10.2 3.10.10
为了提升下载的速度,改用淘宝的npm镜像。 备注:网络限制不允许访问淘宝,这一步未实验成功,但不影响后续的安装和执行。 npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g typescript typings
下载: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"
npm install -g @angular/cli
安装过程中,会提示Python找不到的错误,没什么特别的影响,可以无视。 验证是否安装成功: ng version
提示版本信息: @angular/cli: 1.0.0
node: 6.10.2
os: win32 x64
第二步,新建Hello工程执行命令,将新建一个【angular2-hello】工程目录: ng new angular2-hello
成功执行将提示下面的信息: installing ng
create .editorconfig
create README.md
create srcappapp.component.css
create srcappapp.component.html
create srcappapp.component.spec.ts
create srcappapp.component.ts
create srcappapp.module.ts
create srcassets.gitkeep
create srcenvironmentsenvironment.prod.ts
create srcenvironmentsenvironment.ts
create srcfavicon.ico
create srcindex.html
create srcmain.ts
create srcpolyfills.ts
create srcstyles.css
create srctest.ts
create srctsconfig.app.json
create srctsconfig.spec.json
create srctypings.d.ts
create .angular-cli.json
create e2eapp.e2e-spec.ts
create e2eapp.po.ts
create e2etsconfig.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.
继续执行命令: ng serve 构建成功的信息如下: ** 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.
在浏览器【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工程就建立成功了。 其他可以实验的工程
参考文档
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 数组 – 如何在Angular 4中将对象转换为数组?
- [WebService]WebService初级教程(一)
- docker – 来自牧场主容器中python客户端的smtp超时
- D o t N e t 相关资源 [更新中]
- scala – Akka – 如何检查邮件在收件箱中的时长?
- adb shell时,提示error: unknown host service的解决办法
- Angular 5 HttpClient比以前的Http有什么优势?
- [框架技术推荐]Bootstrap:快速开发Web应用程序的前端工具包
- shell – ZSH Agnoster主题显示机器名称
- twitter-bootstrap – Bootstrap css只使用glyphicons