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以多种方式支持路由：

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

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


ng g module my-module --routing

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

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

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

关CLI构建编译项目

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

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

ng build 可以同时指定要与该构建（或）一起使用的构建目标（ --target=production或--target=development ）和环境文件。默认情况下，使用开发构建目标和环境。

 --environment=dev--environment=prod

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



//angular-cli.json文件


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

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


//cmd命令

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

ng build --environment=loca 


ng build --environment=prod

关于代理服务器

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

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

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


//proxy.conf.json

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

然后我们需要配置命令符

修改 package.json 文件



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

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

然后我们运行我们的项目 npm start 这样我们所有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