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

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。

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

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