1.以前写过一个webstorm借助angular-cli搭建angular2.0项目的博客。 后来许久没有接触过angular,现在拾起来的时候发现已经更新,用法变了。所以来记录下,以免其他友看到照成误区。

2.这也是说明一个道理,别人写下的东西你不一定适用,因为技术的东西说变就变,谁知道的。

基于Node环境,安装angular-cli。  新版的已经变成安装@angular/cli。所以安装时:npm install -d @angular/cli

那么问题来了,一大堆错误,说缺少pathon和visual studio。还有说版本不兼容的,所以建议node的版本不要太高,也不用太低。第一次我用的7以上的版本说不支持。然后换成6.0以上也是不支持。最后换成6.9几用的好好的。

并不是所有人的电脑安装都会出问题的。

既然说缺少pathon那就安装吧。推荐一个网友的解决办法,我也是参照这个解决的,就不重复啰嗦  http://www.cnblogs.com/liangxiaojie/p/4595406.html

说到底会出错的原因都是因为npm是国外的,需要FQ,会有那么一丝丝不稳定。

安装好angular/cli之后,就可以用ng命令啦。

例如:ng --version 查看版本号

ng help 帮助

当然最重要的还是用它创建工程。  ng new 工程名

然后会自动帮你创建所有的依赖,搭建成一个简单的模板,大概这样

node-modules会自动帮你创建,只是耗时比较长,建议一次下载多次copy。

运行项目试试,进入你的工程目录下,然后ng serve   默认是开启localhost:4200的。

所以浏览器里打开localhost:4200就可以啦。

这是最简单的项目啦,当然你可以继续创建命令

例如运行ng g c user

它是四个四个创建的,配套吗!!

这些文件工程太大了,运行时可以打压,ng serve --prod --aot 也是可以的。

好了就介绍这些基础的,其实后面的使用并没有改变太多啦

angular 2.0 关于新版angular-cli的应用的更多相关文章

  1. 全面支持Angular2的Web后台Bootstrap模板Sing App - Web & Angular 2.0 Dashboard

    在线预览 Sing App v3.3.0 (包含Angular 2.0版本实现) 现在,本模板完全支持Angular2.0版本啦. Sing Web App 是由专业前端工程师采用行业内流行的技术构建 ...

  2. Angular 2.0 从0到1 (六)

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

  3. 创建 Angular 8.0 项目

    创建 Angular 8.0 项目,首先确保已经安装了 nodejs,如果没有安装,请看这篇文章安装:node.js 安装 1.新建一个空文件夹 angularproject,作为工作区 2.安装 A ...

  4. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  5. Angular 2.0 的设计方法和原则

    转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...

  6. Angular从0到1:function(下)

    1.前言 2.function(下) 2.13.angular.isArray(★★) angular.isArray用于判断对象是不是数组,等价于Array.isArray console.log( ...

  7. Angular从0到1:function(上)

    1.前言 Angular作为最流行的前端MV*框架,在WEB开发中占据了重要的地位.接下来,我们就一步一步从官方api结合实践过程,来学习一下这个强大的框架吧. Note:每个function描述标题 ...

  8. [转贴]有关Angular 2.0的一切

    对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...

  9. Angular 2.0 从0到1:Rx--隐藏在Angular 2.x中利剑

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...

随机推荐

  1. simplexml 对xml的增删改操作

    simplexml 是php 处理xml 文件的一个方法,另一个是dom 处理,这里只说simplexml .目前php 处理xml 用的比较多,比较成熟的还是dom .但dom 在速度和代码量上还是 ...

  2. YII 1.0 小功能总结

    1.操作成功提示 只能使用一次,getFlash()取值以后,值就删除了 控制器中: Yii::app()->user->setFlash('success','修改成功'); 视图中: ...

  3. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

  4. Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer

    Heka 编译安装后 运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer 解决办法: 1.  Start heka ...

  5. 数字操作 转为false的类型 typeof操作符 isNaN函数

    console.group('数字操作'); // 浮点数值的内存空间是整数的两倍: // 会alert出来3e-7;从小数点后面6个0开始,就用科学计数法了: //alert(0.0000003); ...

  6. Android 自定义Activity栈对Activity统一管理

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6307239.html public class AppManager { private static St ...

  7. 比AutoMapper轻量快速简洁的实体映射库YeaJur.Mapper

    之前在做实体深拷贝时一直使用的AutoMapper,但是总是觉得其写法比繁琐,效率也不算很高,自己写了一个轻量级的实体拷贝库YeaJur.Mapper,和AutoMapper 测试对比如下 PK项 Y ...

  8. Zookeeper以Windows服务安装运行

    1.下载的Zookeeper是.cmd的批处理命令运行的,默认没有提供以windows服务的方式运行的方案 下载地址:http://zookeeper.apache.org/ 2.下载prunsrv ...

  9. iOS 图片压缩方法

    iOS 图片压缩方法 两种图片压缩方法 两种压缩图片的方法:压缩图片质量(Quality),压缩图片尺寸(Size). 压缩图片质量 NSData *data = UIImageJPEGReprese ...

  10. easyui treegrid实现显示checkbox并能获取到选定值的

    闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...