Angular入门到精通系列教程(6)- Angular的升级
环境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
1. 摘要
近些年Web技术飞速发展,新的类库、框架如雨后春笋般不断涌现,而每个类库也不断的更新、升级,甚至是不再兼容的升级。笔者之前维护的一个6年项目,是用jQueryMobile开发的,估计入门web开发比较短的同学都没有听说过吧。另外,就拿Angular来说,从2.0开始,使用ts开发,不再兼容1.0 版本。从2.0开始,命名为Angular,1.0的叫angularJS, 2个版本彻底切割。而这也是angular流失很多用户的其中一个原因。
针对这些问题,Angular专门提供了版本升级的指导方案,非常详细、准确(Angular每半年发布一个主版本,这个也是必须的)。
2. https://update.angular.io/
https://update.angular.io/ 是官方的angular升级指导页面,你可以选择你的项目的版本,以及要升级到的版本;同时可以选择项目使用的技术,比如是否使用了Angular Material (这也是之前推荐这个UI框架的原因--升级方便),是否和AngualrJS同时使用等等。之后,自动提示升级步骤。
升级主要通过 ng update xxx 来实现, ng update 命令不同于npm命令,npm update相当于 npm+更改配置(代码),也就是说,再更新完node-modules之后,ng update会自动更新配置文件,甚至是代码中的基本的import的代码,实现自动升级、更新。
举例,10.2升级到11.1,如果没有涉及到复杂的anuglar技术,大致的升级步骤是:
- Run
ng update @angular/core @angular/cliwhich should bring you to version 11 of Angular. - Run
ng update @angular/material. - Angular now requires TypeScript 4.0. ng update will migrate you automatically.
- Support for IE9, IE10, and IE mobile has been removed. This was announced * in the v10 update.
3. 总结
- Angular虽然更新、升级比较频繁(从某种意义上也是优点),但是升级部分确实做得最完善的
- UI框架,@angular/material可以实现和Angular的同步升级,其他第三方框架,都会有演示,时间不等
- 个人不推荐使用最新的版本,不做小白鼠。可以使用之前发布的一个版本,比如现在是v11,那么我们就使用v10。更稳定,同时网上资料也多。
- 及时更新angular版本,免得技术债欠的越来越多而导致无法升级。
- 这个升级指导也是相对的,如果你对Angular有些特殊的用法,或者没有安装官方推荐方式使用,升级也是比较麻烦的。
- 升级时,如果跨多版本,建议一个版本一个版本的升级,每升级一次,执行UT或者把站点跑起来试试,以防出错。
---------------- END ----------------
======================
Angular入门到精通系列教程(6)- Angular的升级的更多相关文章
- Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目
1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...
- Angular入门到精通系列教程(7)- 组件(@Component)基本知识
1. 概述 2. 创建Component 组件模板 视图封装模式 特殊的选择器 :host inline-styles 3. 总结 环境: Angular CLI: 11.0.6 Angular: 1 ...
- Angular入门到精通系列教程(10)- 指令(Directive)
1. 摘要 2. 组件与指令之间的关系 2.1. 指令的种类 3. Angular 中指令的用途 4. 指令举例 4.1. 指令功能 4.2. Anuglar CLI生成基本文件 4.3. Direc ...
- Angular入门到精通系列教程(11)- 模块(NgModule),延迟加载模块
1. 摘要 2. NgModule举例.说明 3. Angular CLI生成模块 4. 延迟加载模块 5. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 No ...
- Angular入门到精通系列教程(13)- 路由守卫(Route Guards)
1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...
- Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...
- 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)
办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...
- Part 7:自定义admin站点--Django从入门到精通系列教程
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...
- 第一章:模型层model layer -- Django从入门到精通系列教程
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 题外话: Django的教程写到这里,就进入 ...
随机推荐
- ATT&CK 实战 - 红日安全 vulnstack (一) 靶机渗透
关于部署:https://www.cnblogs.com/Cl0ud/p/13688649.html PS:好菜,后来发现内网主机还是PING不通VM1,索性三台主机全部配成NAT模式,按照WEB靶机 ...
- 函数与函数式编程(生成器 && 列表解析 && map函数 && filter函数)-(四)
在学习python的过程中,无意中看到了函数式编程.在了解的过程中,明白了函数与函数式的区别,函数式编程的几种方式. 函数定义:函数是逻辑结构化和过程化的一种编程方法. 过程定义:过程就是简单特殊没有 ...
- PR全套插件一键安装
PR全套插件一键安装,无需注册码软件也是我在别的地方搬来的,自己用着很好,决定分享出来! 我的PR版本是2019,用着没有任何问题.我没有安装其他版本PR,所以无法测试,不过应该是可以用的. 使用截图 ...
- vertical-align什么时候使用?常用的值分别有什么作用?
设置元素的垂直对齐方式 常用的值: 1.baseline:默认.元素放置在父元素的基线上. 2.sub:垂直对齐文本的下标. 3.super:垂直对齐文本的上标 4.top:把元素的顶端与行中最高元素 ...
- vue Export2Excel 导出文件
使用需要引入这些js 在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js npm install -S file-saver 用来生成文件的web应用程序 n ...
- tensorflow学习笔记——DenseNet
完整代码及其数据,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/DeepLearningNote 这里结合网络的资料和De ...
- vue seo 优化
预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 ...
- Docker(六):Docker安装Kibana
查找Kibana镜像 镜像仓库 https://hub.docker.com/ 下拉镜像 docker pull kibana:7.7.0 查看镜像 docker images 创建Kibana容器 ...
- 记:create-react-app暴露配置报错
上面主要是说 webpack 版本冲突 不是create-react-app本身的问题,需要手动解决. 解决办法: npm run eject // 显示所有的依赖项 如果运行出现类似这样的报错 Ar ...
- 免杀shellcode并绕过杀毒添加自启动
https://www.wtfsec.org/posts/%E5%85%8D%E6%9D%80shellcode%E5%B9%B6%E7%BB%95%E8%BF%87%E6%9D%80%E6%AF%9 ...