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

3.4 装包新项目(build | b

配备实际意义
--baseHref=xxindex.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

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:什么是Angular cli?怎么用?发布于2021-12-18 15:09:02