angular-cli小白入门选集 1 安装与使用 2 命令参考 3 在指定目录中创建组件等 4 使用sass 5 安装angular-cli报错

  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]
类型 用法
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 当前已禁用

参数:

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

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

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