angular-cli命令总结

2023-09-03 22:13:25

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 [options] 简写： ng g [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= 指定父路由.仅用于生成组件和路由.默认为指定的路径。 –skip-router-generation 跳过生成父路由配置。只能用于路由命令。 –default 指定路由应为默认路由。 –lazy 指定路由是延迟的。 默认为true。

    2.4 获取/设置cli配置

    获取配置：

    命令： ng get [options] 设置配置：

    命令： ng get [options] options：

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

    2.5 测试

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

    参数 描述 –watch 继续运行测试. 默认为true –browsers , –colors , –reporters , –port , –log-level 这些参数直接传递给karma

    3 在指定目录中创建组件等

  • src目录下默认在app文件夹下创建组件。
  • 若想在子目录下创建，则需要先cd到这个目录，再执行ng g。
  • 不能在组件中建组件要报错，这里必须先在子目录中建立module,然后才能在模块中建组件

    • 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。

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

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



    原文转载自：http://blog.csdn.net/qq451354/article/details/54613408    恩，很感谢作者的无私奉献，我放在这里随时查阅


    本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

    相关文章

    Duilib中list控件支持ctrl和shif多行选中的实现

    [ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

    win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

    Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

    读LDD3，内存映射与DMA--PAGE_SHIF…

    VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

    更换iBus五笔的左与右Shif

    sublime ctrl+shif+f 没用解决办法

    idea 对 ctrl + z 的撤销 是 ctrl + shif + z

    计算机最早的设计师应用于,计算机应用基础选择题doc.doc

    win10自带截图神器：Win+Shift+S

    Python基础之文件目录操作

    python简述目录_Python基础之文件目录操作(示例代码)

    tp5 如何做数据采集

    任务2-7(服务器字体+阿里巴巴矢量库)

    html标签（1)：h1~h6,p,br,pre,hr

    TI 电量计介绍与芯片选型指南

    几款TI电源芯片简介

    TI DSP芯片C2000系列读取FLASH数据

    德州仪器(Ti)平台嵌入式开发基础

    TI三相电机智能栅极驱动芯片特点分类

    省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

    Hadoop生态圈技术栈（上）

    大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

    小猿圈之Linux下Mysql 操作命令

    大数据Hadoop生态圈常用面试题

    大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

    备战Noip2018模拟赛11（B组）T3 Monogatari 物语

    【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

    NYOJ 78 圈水池

    递归问题 跑道 汽车 绕圈问题 Python实现

    Hadoop生态圈（三）：MapReduce

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

     返回
    顶部