首页 > 代码库 > angular-cli小白入门选集
angular-cli小白入门选集
1 安装与使用
- 首先确保安装了nodejs。
npm i angular-cli -g。- ng-cli的全局关键字为ng。
- 创建新项目：
ng new projectName [options]。 - 创建组件：
ng g component componentName。 - 启动server：
ng server，默认端口4200。 - 打包：
ng build --prod，默认生成/dist目录，并将打包后的结果存放在此。 - 测试：
ng test，使用 karma 运行单元测试。 - cli版本：
ng version - 错误检测：
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 在指定目录中创建组件等
- src目录下默认在app文件夹下创建组件。
- 若想在子目录下创建，则需要先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小白入门选集