zoukankan      html  css  js  c++  java
  • 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-webangular2-sample
    ode_modules
    ode-sassuildinding.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 odejs】。

    验证是否安装成功:

    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 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 src	est.ts
      create src	sconfig.app.json
      create src	sconfig.spec.json
      create src	ypings.d.ts
      create .angular-cli.json
      create e2eapp.e2e-spec.ts
      create e2eapp.po.ts
      create e2e	sconfig.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方式)
  • 相关阅读:
    汇总遇到的问题
    mybatis下载地址
    快速创建数据大绝招
    常见的dos命令
    添加react-native-icons中文傻瓜式教程
    react native配置环境watchman监控安装失败解决办法
    如何使用SwitchyOmega.crx谷歌插件
    Git与Github学习笔记
    HTTP协议详解
    使用npm安装一些包失败了的解决方法(npm国内镜像介绍),安装速度跟cnpm一样哦
  • 原文地址:https://www.cnblogs.com/lyf906522290/p/8342851.html
Copyright © 2011-2022 走看看