angular-cli小白入门选集

摘要:
ng-cli的全局关键字是ng。项目中angular-cli.json中有一个配置:“defaults”:{“styleExt”:“css”}123123这里似乎应该改为scs,但我没有改。打包和启动服务器没有问题。5.安装angular cli时报告错误。今天,我们下载了沙漠中的NiceFish项目,然后启动了npmi。安装angular cli时报告错误。发现该项目与我的全局ng-cli版本不一致,然后npm提示npmWARNdeprecatedangular-cli@1.0.0-beta.28.3:angular cli已重命名,然后卡住。因为我的ng-cli不再可用。后来,各种数据检查发现,npm可以在安装软件包时检查npmiangular-cli-g-verbose的进度,然后查看其安装位置。如果有问题,请全局安装,然后安装ng-cli。
1 安装与使用
  1. 首先确保安装了nodejs。
  2. npm i angular-cli -g
  3. ng-cli的全局关键字为ng。
  4. 创建新项目:ng new projectName [options]
  5. 创建组件:ng g component componentName
  6. 启动server:ng server,默认端口4200。
  7. 打包:ng build --prod,默认生成/dist目录,并将打包后的结果存放在此。
  8. 测试:ng test,使用 karma 运行单元测试。
  9. cli版本:ng version
  10. 错误检测:ng lint,运行codelyzer linter检测。
2 命令参考

2.1 创建项目

命令:ng new proName [options]
参数描述
–dry-run -d只输出要创建的文件和执行的操作,实际上并没有创建项目
–verbose -v输出详细信息
–skip-npm在项目第一次创建时不执行任何npm命令
–name指定创建项目的名称

2.2 初始化项目

在当前所在目录下初始化一个新的 Angular 项目 
命令:ng init proName [options] 
参数同创建项目。

2.3 创建类

在项目中创建模块、组件、指令等代码。

命令: ng generate <type> [options]
简写: ng g <type> [options]
类型用法
Componentng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng g module my-module
Routeng g route my-route 当前已禁用

参数:

参数描述
–flat不在自用目录内创建代码
–route=<route>指定父路由.仅用于生成组件和路由.默认为指定的路径。
–skip-router-generation跳过生成父路由配置。只能用于路由命令。
–default指定路由应为默认路由。
–lazy指定路由是延迟的。 默认为true。

2.4 获取/设置cli配置

获取配置:

命令: ng get <path1, path2, ...pathN> [options]

设置配置:

命令: ng get <path1=value1, path2=value2, ...pathN=valueN> [options]

options:

参数描述
–global返回全局配置值,而不是本地配置值(如果都设置). 此选项还可以使命令在项目目录外工作

2.5 测试

使用 karma 运行单元测试 
命令: ng test [options]

参数描述
–watch继续运行测试. 默认为true
–browsers , –colors , –reporters , –port , –log-level这些参数直接传递给karma
3 在指定目录中创建组件等
  1. src目录下默认在app文件夹下创建组件。
  2. 若想在子目录下创建,则需要先cd到这个目录,再执行ng g
4 使用sass

在cli创建的ng2项目中使用sass很方便,只需要将你的样式文件的css后缀改成scss,并且在component.ts中引用就可以了,cli内部已经配置了sass-loader。

项目中的angular-cli.json中有一个配置:

  "defaults": {
    "styleExt": "css"
  }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

这里貌似应该改成scss,但是我没有改,打包、启动server都没有问题。

5 安装angular-cli报错

今天下载大漠的NiceFish项目,然后启动npm i ,安装angular-cli的时候报错,发现这个项目与我全局的ng-cli版本不一致,然后npm提示

npm WARN deprecated angular-cli@1.0.0-beta.28.3: angular-cli has been rename

然后然后就卡住不动了。我能看明白这句话的意思,但不知道如何解决。因为我的ng-cli已经不能用了。 
然后我就开始折腾,删除所有ng-cli的包,用everything检索所有目录的angular,除了项目中出现的angular-cli,一般出现在以下几个目录: 
1. C:user/chengyanzhao/AppData/Local&Roaming 
2. npm全局包路径下

我将这几个位置的ng-cli内容都删除了,但是不管用,而后又卸载了nodejs,重新安装,依然无效。

后来各种查资料,发现npm在安装包的时候可以查看进度

npm i angular-cli -g --verbose

然后看到里面安装在哪里的时候出错了。比如gyp、node-sass等。出问题的就全局安装,然后在装ng-cli。

最后终于安装成功了。。。。。心塞。

这里记录一下,以防以后再出现这种问题不知道怎么搞定。

免责声明:文章转载自《angular-cli小白入门选集》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇制作C/C++动态链接库(dll)若干注意事项MDK内的KEEP关键字以及$$Base $$Limit下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

VM虚拟机网络设置

 VM虚拟机网络设置(转) VMWare中的几种网络设置 (1)Bridged方式 用这种方式,虚拟系统的IP可设置成和本机系统在同一网段,虚拟系统相当于网络内的一台独立的机器,和本机一起插在一个Hub上,网络内其他机器可访问虚拟系统,虚拟系统也可访问网络内其他机器,当然和本机系统的双向访问也不成问题。 (2)NAT方式 这种方式也能实现本机系统和虚拟系...

配置 OSPF 的 DR 选择示例

组网需求 RouterA 的优先级为 100,它是网络上的最高优先级,所以 RouterA 被选为 DR;RouterC 是优先级第二高的,被选为 BDR; RouterB 的优先级为 0,这意味着它将无法成为 DR 或 BDR; RouterD 没有配置优先级,取缺省值 1。 1、拓扑图 配置思路 OSPF 的 DR 选择: 1. 配置各路由...

代理ARP的总结

ARP/代理ARP的总结1.ARP首先讲到ARP,ARP是地址解析协议,它的作用是在以太网环境下,通过3层的IP地址来找寻2层的MAC地址,得到一张ARP缓存表。转发数据的时候根据ARP缓存表来进行传输。下图详细说明数据传输时ARP是如何一步步操作的。在配置IP地址后,不做任何ping操作,ARP缓存表是这样的: 当PC去ping R1的时候,你会发现第...

vue SSR 部署详解

 先用vue cli初始化一个项目 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错。 后续选router模式记得选 history 模式。 项目就绪后,cd 进入,开始改造。 先贴项目结构: 改造main.js、router.js和store.js 根据vue ssr官方文档进行路由...

TP5 多入口文件配置的坑

闲话不多说,TP5(5.0.20) 在配置多入口文件的时候你是否遇到过一下的问题呢? 开发设计的需求吧网站拆分为前台、后台、API 3 个模块,对应的也需要3个入口文件,后台和API入口文件是用PATH_INFO 模式访问(关闭路由)。 在配置后台入口文件的时候,直接从前台入口文件拷贝了主要代码如下 <?php // [ 后台应用入口文件 ] //...

Newifi D1或 D2在Openwrt中,启用硬件NAT,启用BBR

Newifi D1或 D2在Openwrt中,启用硬件NAT,启用BBR 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-09-27. 启用 mt7621的硬件nat (Newifi D1 或 D2) newifi mini 用的是mt7620,也有硬件NAT,但不知道openwrt是否支持。 登陆路由器的网页。 Network -&g...