开发工具:windows ,Vscode, npm,

前提:安装nodejs

nodejs 模块全局安装路径配置:http://www.cnblogs.com/rancho-blog/p/6567929.html(我的另外一遍)

nodejs下载地址:https://nodejs.org/en/

vscode下载地址:https://code.visualstudio.com/

1.全局安装angular-cli:    npm install angular-cli -g

npm 设置淘宝镜像 : npm config set registry "https://registry.npm.taobao.org/"

其中node-sass 的包有可能会下载失败因为国内的网络原因,可以在npm config 中的proxy 设置代理, 或者将registry 设置为淘宝地址,安装完成大概就是下图这样一个样子。会有很多很多包

2.查看是否安装成功: ng -v

3.使用cli 新建项目工程 ng new project-name

4.生成项目结构图:

5.对项目结构主要内容解释如下:(本文对于单元以及集成测试测试没有说明, 若想了解请到http://www.protractortest.org/#/ 查看专门为angular设计的集成测试)

e2e ------------------------------用于测试(本文对于测试不会涉及)

node_modules------------------存放依赖包的地方

src--------------------------------存放源代码

app----------------------------根模块

app.component.css------样式文件

   app.component.html---模板

   app.component.spec.ts-测试

   app.component.ts-------组件

   app.module.ts------------模块

environments----------------环境

   environment.prod.ts----生产环境

   environment.ts----------非生产环境

index.html-------------------宿主页面

mian.ts-----------------------程序引导

tsconfig.json-----------------编译配置

  angular-cli.json--------------angular-cli配置

package.json----------------依赖包以及npm的命令

6.运行程序 ng serve  在浏览器上输入localhost:4200

7 在ng serve 后面加上 --prod -aot  重新运行

(ng serve --prod --aot)     与之间的对比  (ng serve) size会小一些

angular2-cli 环境搭建的更多相关文章

  1. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  2. Angular2+学习第2篇 cli 环境搭建过程

    Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等:具体参考Angular-cli GitHub Angular的启动过程,需要先回答三个问题: 启动时加 ...

  3. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  4. SpringBoot+Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675

  5. Ionic2 cordova angular2 打包到Android apk环境搭建

    一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...

  6. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  7. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  8. .Net Core + Angular2 环境搭建

    环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...

  9. NET Core 环境搭建和命令行CLI入门

    NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文 ...

  10. NET Core 环境搭建和命令行CLI入门[转]

      NET Core 环境搭建和命令行CLI入门 时间:2016-07-06 01:48:19      阅读:258      评论:0      收藏:0      [点我收藏+]   标签: N ...

随机推荐

  1. spring 使用@Bean装配Bean

    通过@Component装配Bean,但是@Component只能注解在类上,不能注解到方法上.对于Java而言,大部分的开发都需要引入第三方的包(jar文件),而且往往并没有这些包的源码,这时候将无 ...

  2. C# WinForm程序中使用Unity3D控件 (转)

    https://www.cnblogs.com/cnxkey/articles/5394378.html 最近在自学Unity3D,打算使用这个时髦.流行.强大的游戏引擎开发一个三维业务展示系统,不过 ...

  3. LeetCode_367. Valid Perfect Square

    367. Valid Perfect Square Easy Given a positive integer num, write a function which returns True if  ...

  4. linux 使用jar 打包成war

    把当前目录下的所有文件打包成game.war jar -cvfM0 game.war ./ -c   创建war包 -v   显示过程信息 -f     -M -0   这个是阿拉伯数字,只打包不压缩 ...

  5. charles Windows 安装

    本文参考:charles Windows 安装 在实际开发.测试中需要通过代理截取 app 的网络请求报文来快速定位问题.https 双向认证的 app 越来越多,fiddler在这方面并不好用.由于 ...

  6. 使用plotrix做韦恩图

    color <- c("#E41A1C","#377EB8","#FDB462") color_transparent <- a ...

  7. 怎样ubuntu下命令行终端显示短路径

    参考:http://blog.sina.com.cn/s/blog_b71132f001016cmm.html ubuntu的终端命令行默认是长路径,即把路径深度全部显示出来,操作起来不是很方便,下面 ...

  8. 如何用C++实现栈

    栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表.限定仅在表尾进行插入和删除操作的线性表.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新元素 ...

  9. Linux 实现回收站功能脚本

    #!/bin/bash function z-trash() { # 判断参数是否为空 if [ ! $1 ] then echo "z-trash error: file name of ...

  10. Python18之函数定义及调用,注释

    一.函数定义 def 函数名(形参1,形参2...): 函数体 return 返回值         (可以返回任何东西,一个值,一个变量,或是另一个函数的返回值,如果函数没有返回值,可以省略retu ...