环境:

  • 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/cli which 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的升级的更多相关文章

  1. Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目

    1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...

  2. Angular入门到精通系列教程(7)- 组件(@Component)基本知识

    1. 概述 2. 创建Component 组件模板 视图封装模式 特殊的选择器 :host inline-styles 3. 总结 环境: Angular CLI: 11.0.6 Angular: 1 ...

  3. Angular入门到精通系列教程(10)- 指令(Directive)

    1. 摘要 2. 组件与指令之间的关系 2.1. 指令的种类 3. Angular 中指令的用途 4. 指令举例 4.1. 指令功能 4.2. Anuglar CLI生成基本文件 4.3. Direc ...

  4. Angular入门到精通系列教程(11)- 模块(NgModule),延迟加载模块

    1. 摘要 2. NgModule举例.说明 3. Angular CLI生成模块 4. 延迟加载模块 5. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 No ...

  5. Angular入门到精通系列教程(13)- 路由守卫(Route Guards)

    1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...

  6. Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布

    目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...

  7. 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)

    办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...

  8. Part 7:自定义admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  9. 第一章:模型层model layer -- Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 题外话: Django的教程写到这里,就进入 ...

随机推荐

  1. XSS挑战赛(2)

    进入第六关 简单判断过滤情况 <>script"'/ 查看源代码 可以看到第二个红框部分跟之前类似,闭合双引号尝试进行弹窗 "><script>ale ...

  2. k8s 节点 notReady问题解决流程

    1.在k8smaster 服务器检查节点状态 kubectl describe nodes  aaaa #没有报错,异常信息   2.在节点上检查kubelet服务状态 netstat -tlanp| ...

  3. vue functional函数式组件

    第1种写法 test.vue <template functional> <div class="test"> {{props.test.name}} &l ...

  4. AtCoder Grand Contest 017 (VP)

    contest link Official Editorial 比赛体验--之前做题的时候感觉 AtCoder 挺快的,现在打了VP之后发现还是会挂的--而且不是加载缓慢或者载不出来,直接给你一个无法 ...

  5. Oh my God, Swagger API文档竟然可以这样写?

    最好的总会在不经意间出现. 作为后端程序员,免不了与前端同事对接API, 一个书写良好的API设计文档可有效提高与前端对接的效率. 为避免联调时来回撕逼,今天我们聊一聊正确使用Swaager的姿势. ...

  6. mysql 8.0 MGR组复制配置

    一.配置组复制的步骤 1.初始化数据目录 2.配置主服务器(primary) 3.配置辅助服务器(secondaries) 4.启动mysql实例 5.安装组复制插件(primary and seco ...

  7. SpringCloud 源码系列(4)—— 负载均衡 Ribbon

    一.负载均衡 1.RestTemplate 在研究 eureka 源码上篇中,我们在 demo-consumer 消费者服务中定义了用 @LoadBalanced 标记的 RestTemplate,然 ...

  8. Linux后台命令导入MySQL语句

    1.首先输入命令: mysql -u root -p 然后输入MySQL的密码会进入到MySQL的命令界面. 2.输入命令use+数据库名字: use databaseName 3.最后输入命令sou ...

  9. wsgi和asgi的关系

    什么是WSGI #CGI CGI(Common Gateway Interface,通用网关接口),定义客户端与Web服务器的交流方式的一个程序,例如正常情况下客户端发送过来一个请求,根据HTTP协议 ...

  10. SQL注入练习第一天

    MySQL 相关知识 在MySQL中,把[INFORMATION_SCHEMA] 看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息.如数据库名,数据库的 ...