angular-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] 
参数同建立项目。css

2.3 建立类

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

命令: ng generate <type> [options]
简写: ng g <type> [options]
类型 用法
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
Route ng g route my-route 当前已禁用

参数:typescript

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

2.4 获取/设置cli配置

获取配置:npm

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

设置配置:json

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

options:sass

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

2.5 测试

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

参数 描述
–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。app

项目中的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。

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

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