什么是Angular cli？怎么用？

WWW.lllT.neT什么是Angular cli？这篇文章内容带各位了解一下Angular中的Angular cli，介绍一下Angular cli的操作方法，期待对各位有些协助！

1. 什么是Angular cli

它是一个命令行界面专用工具，可用以复位、开发设计、搭建和维护保养 Angular 运用。【有关实例教程建议：《angular教程》】

2. 如何安装

无npm先到在线下载nodejs

https://nodejs.org/en/download/

npm install -g @angular/cli

卸载掉得话也可以携带-g

npm uninstall -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	true则在运行新项目后全自动开启网页页面，缩写： ng server -o
--port	设定运行的端口，防止运行好几个新项目占有同一个端口号运行不起來
--proxyConfig=xx	设置代理文档
--watch=true|false	是不是在编码变更时全自动再次搭建页面刷新，默认设置true
--aot=true|false	是不是以预编译方式运行新项目，默认设置为false。 缺陷：新项目运作時间提高。 优势：有时候开发设计时没什么问题，装包发布以后发生问题可以在当地打开它来调节不正确。

3.4 装包新项目（build | b）

配备	实际意义
--baseHref=xx	index.html浏览别的静态数据网络资源文档的绝对路径。还可以在index.html的<base href="xx">中配备，还能够在.angular.json中的baseHref配备。
--aot=true|false	是不是以预编译方式运行新项目， 默认设置false,一般在angular.json中配备
--optimization=true|false	是不是开启搭建导出的提升。
--configuration=xx	特定装包自然环境的配备
--prod=true|false	--configuration=production的缩写。true则以工作环境的方法装包，开展摇树提升等实际操作。

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

• 先查询有什么可以升级

ng update

• 可以单独一个升级，也可挑选所有升级

ng update --all

• 假如升级时提醒有的依赖包版本号不一致，可以强制性升级

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.5.3")
Incompatible peer dependencies found. See above.

强制性升级方法:

ng update --all --force

如何修改update默认设置下载神器为yarn

ng config --global cli.packageManager yarn

ng set --global packageManager=yarn

3.6 别的

• ng lint: 运行代码标准检验
• ng test: 运作单元测试卷
• ng e2e： 运作端到端检测
• ng add: 加上一个第三方库到新项目中，而且将其自定配备也加上到新项目中。要怎么写一个可以用ng add加上的个性化配备的第三方包？

大量使用方法升级于 github

https://github.com/deepthan/blog-angular

大量程序编写有关专业知识，请浏览：编程视频！！

以上便是什么是Angular cli？怎么用？的详尽具体内容，大量请关心自学java网其他相关文章！

WWW.lllT.neT