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方式)
  • 相关阅读:
    Windows网络编程经验小结
    异步Socket服务器与客户端
    用C#实现C/S模式下软件自动在线升级
    Linux 安装字体
    word 生成目录
    Linux sar使用
    yum 使用说明
    HASH JOIN算法
    row cache lock
    cursor: pin S
  • 原文地址:https://www.cnblogs.com/lyf906522290/p/8342851.html
Copyright © 2011-2022 走看看