Angular cli的使用方法是什么,如何掌握基本操作

Admin 2022-05-21 群英技术资讯 468 次浏览

这篇文章主要讲解了“Angular cli的使用方法是什么,如何掌握基本操作”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Angular cli的使用方法是什么,如何掌握基本操作”吧!

1. 什么是Angular cli

它是一个命令行界面工具,可用于初始化、开发、构建和维护 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添加的自定义配置的第三方包?

以上就是关于“Angular cli的使用方法是什么,如何掌握基本操作”的介绍了,感谢各位的阅读,如果大家想要了解更多相关的内容,欢迎关注群英网络,小编每天都会为大家更新不同的知识。
群英智防CDN,智能加速解决方案
标签: Angular cli

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服