标签： 升级

Angular 项目升级后，ng-bootstrap 的pagination 组件显示多余的 “(current)”

最近有个项目从 Angular 11 升级到了 Angular 13 （升级过程可以参考这篇文章），其他部分都显示良好，不过在很多数据列表页面出现了页码显示的问题，翻页器 pagination 的当前页码后面跟着个扎眼的 “(current)”，如下图：

通过查看代码，对比 bootstrap 和 ng-bootstrap 源代码，发现原来是版本对应兼容的问题。

项目升级后， bootstrap 版本升为了 4.6.2，而 ng-bootstrap 升为了 12.0.0。而根据 ng-bootstrap 官方文档，版本的对应关系应该是如下：

因此通过将 ng-bootstrap 降级到 11.0.1 问题得到解决。

这个问题的根本原因，在于 bootstrap 新版本中去除了一段代码，见这个 issue：

https://github.com/ng-bootstrap/ng-bootstrap/issues/3870

新版本 ngb 也跟着去掉了包含 (current) 的这段代码，但若依赖项是老版本 bootstrap，里面还有这段代码，那就显示出来了。

用 JHipster 生成的应用的升级小技巧

JHipster的基本介绍就不说了，官方网址是： https://www.jhipster.tech

关于用它生产的应用程序如何进行升级，看这里：https://www.jhipster.tech/upgrading-an-application/

由于它是一个代码生成器，因此每次升级会覆盖原有代码，如果对生产的代码修改得多，那么升级要解决的冲突就多。

因此，第一个要点，就是尽量把自己新增加的业务逻辑写在另外的文件中，尽量少修改生成的那部分代码。所采用的技巧，是 side by side 的方式，具体可以参考：https://www.jhipster.tech/tips/035_tip_combine_generation_and_custom_code.html#pattern-3—side-by-side

第二个要点，具体升级的时候，如果你经常修改 entity 定义（譬如因为字段删改、重命名等导致 .jhipster文件夹下的 json 文件修改）等文件，那么建议升级之前先删除 jhipster_upgrade 分支。换句话说，每次升级都是以当前版本的 entity 定义为基础，如此可以避免很多不必要的 entity 文件相关的冲突。具体解释理由：如果以比较早以前就生成了的 jhipster_upgrade 分支为基础来升级，而这个分支里面留存的 entity 定义又是很早的版本，那么就会生成不一样的 entity 文件，导致需要进行冲突解决。