deepthan/blog-angular

Angular cli用法

deepthan opened this issue · 0 comments

deepthan commented

1. 什么是Angular cli

它是一个命令行界面工具，可用于初始化、开发、构建和维护 Angular 应用。

2. 如何安装

无npm先去下载nodejs

npm install -g @angular/cli

3. 如何使用

new|n指n是new的缩写，效果相同，下同。

3.1 创建项目(new | n)

ng new my-project

它会创建一个angular基础项目并且下载依赖运行项目，默认端口是4200。

可能需要用到的自定义内容

用法形如：

 ng new my-project --xxx=x

以下不特殊注明默认值均为false

参数 意义
`--force=true false`
`--routing=true false`
`--skipInstall=true false`
`--skipTests=true false`
`--force=true false`
`--style=css scss
`--packageManager=npm yarn
--prefix=prefix 指定选择器的前缀（组件、指令），如传入--prefix=dep则组件的selector会成为dep-xxx，

呀，创建的时候没有自定义，怎么补救呢？ 直接在angular.json中改~

3.2 新建文件(generate | g)

新建一个基础文件，里面有预设的代码片段。如ng generate service demo，则会在当前文件夹新建一个demo.service.ts。

命令 作用 简写
ng generate module xx 新建模块 ng g m xx
ng generate component xx 新建组件 ng g c xx
ng generate directive xx 新建指令 ng g d xx
ng generate service xx 新建服务 ng g s xx
ng generate pipe xx 新建管道 ng g p xx

还有个更简单的方法:
vscode 中下载Angular Files插件，搜索alexiv.vscode-angular2-files即可找到。想在哪里创建点哪里。用起来爽歪歪。后面会写一个vscode开发angular好用的插件~

3.3 运行项目(serve | s)

配置 意义
--host=xx 设置应用的主机地址，别人可以根据这个地址访问你启动的应用。xx可以是你的ip或者0.0.0.0
`--open=true false`
--port 设置启动的端口号，避免启动多个项目占用同一个端口启动不起来（有人知道怎么让它检测到端口被占用自动加1？）
--proxyConfig=xx 设置代理文件
`--watch=true false`
`--aot=true false`

3.4 打包项目（build | b）

配置 意义
--baseHref=xx index.html访问其他静态资源文件的相对路径。也可以在index.html的<base href="xx">中配置，还可以在.angular.json中的baseHref配置。
`--aot=true false`
`--optimization=true false`
--configuration=xx 指定打包环境的配置
`--prod=true false`
--configuration详解
当我需要打成不同的环境包时，可以使用以下方法：

在angular.json中做了如下配置，：

{
    projects： {
        project-name: {
            architect: {
                build: {
                    configurations: {
                        production: {
                            "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            ...
                        },
                        qa: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.qa.ts"
                                }
                            ],
                            ...
                        },
                        sit: {
                             "fileReplacements": [
                                {
                                  "replace": "src/environments/environment.ts",
                                  "with": "src/environments/environment.sit.ts"
                                }
                            ],
                            ...
                        }
                    },
                    
                }
            }
        }
    }
}

之后可以进行不同的环境打包：

  • qa: ng build --c=qa
  • sit: ng build --c=sit
  • prod: ng build --c=production

--c 是 --configuration的缩写

3.5 更新项目（update ）

angular半年更新一个大版本，及时更新版本是非常重要的事情，如果落后高于1个版本以上，后续可能升级会很麻烦（别问我怎么知道，再问跳楼）。

从一个主版本升级到另外一个主版本

ng update @angular/cli@^<major_version>  @angular/core@^<major_version>

升级之前最好看下官方的升级指南

3.6 其他