Angular CLI 常用终端操作命令

CLI常用命令


ng new project-name - 创建一个新项目,置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端(end-to-end)测试
ng serve - 启动一个小型web服务器,用于托管应用
ng deploy - 即开即用,部署到Github Pages或者Firebase


    组件| ng g component home/component/my-new-component     
    //相对生成组件生成位置在项目的根目录的  src/app/home/component(指令其他等等都可以用该方式生成)

    指令| ng g directive my-new-directive 
    
    管道| ng g pipe my-new-pipe 
    
    服务| ng g service my-new-service 
    
      类| ng g class my-new-class 
    
    接口| ng g interface my-new-interface 
    
    枚举| ng g enum my-new-enum 
    
    模块|ng g module my-module

关于CLI配置端口



//   0.0.0.0代表 对外开放的ip接口地址, 4201代表访问的端口号    49153 代表的热重载的端口号
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

关于CLI生成路由


CLI以多种方式支持路由:

初始化创建项目时,自动添加了 <code> @angular/router </code> ,自动添加到package.json 文件中

生成模块路由的时候可以使用指令 <code> ng g module my-module --routing</code> ,在 <code> src/app/my-module/ </code> 目录下创建名叫 my-module文件名的路由模块


ng g module my-module --routing

该文件包括一个空Routes对象,您可以填充不同组件和/或模块的路由。

该--routing选项还会生成与模块名称相同的默认组件。

您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。

关CLI构建编译项目


输入命令 <code> ng build </code> 来编译项目,生成编译后的文件存放目录在 项目根目录下 <code> dist/ </code> 目录下面

关于 CLI 构建正式服务器打包文件和测试环境文件还有本地文件


<code> ng build </code> 可以同时指定要与该构建(或)一起使用的构建目标( <code> --target=production或--target=development </code> )和环境文件。默认情况下,使用开发构建目标和环境。

 --environment=dev--environment=prod 

可以在 <b> angular-cli.json </b> 该文件中配置映射编译环境路径



//angular-cli.json文件


"environments": {
    "loca": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}


这些选项也适用于服务命令。如果你不传递一个值 <code> environment </code>,它将默认为 <b> dev </b> 或者 <b> development </b> 和 <b> prod </b> 或者 <b>production</b>。


//cmd命令

//编译 angular-cli.json 文件配置  传的参数来编译不同服务端的文件如执行下面命令编译的是json文件中 <b>  envuronments.loca  </b> 配置的文件路径

ng build --environment=loca 


ng build --environment=prod


关于代理服务器


在webpack的dev服务器中使用代理支持,我们可以高速缓存某些url并将其发送到后端服务器。我们通过传递一个文件来做到这一点 <code> --proxy-config </code>

比如说我们有一台服务器正在运行 <b>http://localhost:8080/api </b>,我们希望所有的请求都到 <b> http://localhost:4200/api </b> 这个个服务器上。

我们 在 <code> package.json </code> 的同级目录下面创建一个为 <code> proxy.conf.json </code> 的文件夹。


//proxy.conf.json

        {
            "/api": {                                           //所有  api  的访问请求全部进行代理
                "target": "http://192.168.1.52:8080/",
                "secure": false
            }
        }


然后我们需要配置命令符

修改 <b> package.json </b> 文件



//我们找到packag.json文件找到   "start"  属性然后修改为   ng serve --proxy-config loca.conf.json

    "scripts": {
        "start": "ng serve --proxy-config loca.conf.json",
    },


然后我们运行我们的项目 <code> npm start </code> 这样我们所有http://localhost:8080/api 下面的请求都可以通过 “ http://localhost:4200/api ”访问了。

更多angular-cli配置
https://github.com/angular/angular-cli/wiki

组件| ng g component my-new-component 
指令| ng g directive my-new-directive 
管道| ng g pipe my-new-pipe 
服务| ng g service my-new-service 
  类| ng g class my-new-class 
接口| ng g interface my-new-interface 
枚举| ng g enum my-new-enum 
模块|ng g module my-module

还有不全的望大家留言,大家互相学习。

<h6 align = "right">sivona</h6>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容