环境:

  • 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. John the Ripper快速密码破解工具简单使用

    在某场比赛中师傅们说需要用到该工具,学习之 题目给了我们一个流量包,分析 发现 .hint.php.swp文件 该文件是使用 vim 编辑文件时异常退出而产生的,可以通过 vim -r 文件名 进行相 ...

  2. ORCHARD WOODEN GATE

    狗: 代码小盒子 爆零秘籍 备忘录 任务计划 核心算法: 搜索/枚举/贪心 dp 分治 数据结构: 并查集 ST表 堆 线段树 树状数组 分块 树套树 平衡树 LCT 莫队 字符串: 哈希 Trie ...

  3. P1654 OSU! 题解

    \(x\) 为该位置有 \(1\) 的期望. 统计两个值 : \(suma\) 和 \(sumb\). \(suma\) 表示连续 \(X\) 个 \(1\) , \(X\) 的平方的期望, \(su ...

  4. BJOI2017 喷式水战改

    题目链接. Description 维护一个序列,支持操作: 每次在 \(P_i\) 位置后插入一段 \(X_i\) 单位的燃料,这一段有三个模式,对应的能量分别是 \(A_i, B_i, C_i\) ...

  5. 【JSOI2019】精准预测(2-SAT & bitset)

    Description 现有一台预测机,可以预测当前 \(n\) 个人在 \(T\) 个时刻内的生死关系.关系有两种: \(\texttt{0 t x y}\):如果 \(t\) 时刻 \(x\) 死 ...

  6. logstash导入DNS解析数据到es中,中间有filebeat

    这个过程中,主要用logstash处理数据的时候不好处理. 在logstash-sample.conf这个配置文件中的配置,我用这个监控filebeat的5044端口 # Sample Logstas ...

  7. STL(标准模板库)

    STL 主要分为三类: container(容器) - 用来管理一组数据元素 lterator(迭代器) - 可遍历STL容器内全部或部分元素的对象 algorithm(算法) - 对数据进行处理(解 ...

  8. AOP基本概念

    连接点joinpoint(类中所有方法) 切入点pointcut(缺少共性代码的方法) 通知advice(被抽取的共性功能的代码逻辑,通知有位置区分,也就是从切入点方法中被抽取代码的前面还是后面抽象出 ...

  9. redis位操作

    setbit 设置指定key的偏移量处的值 key:键值 offset:二进制数据的偏移量(注意从左开始为第0位) value:要设置的值(0或1) getbit 获取对应key的offset处的值 ...

  10. 面试 09-02.js运行机制:异步和单线程

    09-02.js运行机制:异步和单线程 #前言 面试时,关于同步和异步,可能会问以下问题: 同步和异步的区别是什么?分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的 ...