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>
网友评论