angular5.0更新以后的原4.0项目打包问题

最近angular更新了5版本,随之@angular/cli发布了1.5版本,最近有同事发现了原angular4的项目无法打包,结果发现执行npm run build后会出现这样的错误:

1
ERROR in Error: Metadata version mismatch for module xxx found version 4, expected 3

主要原因是因为angular不同包之间版本不匹配造成,这就涉及到了package.json里面包版本号匹配的问题。

那就再来看看package.json包版本管理的一些概念。

package.json文件中一个版本号包括三个部分: [主要版本号,次要版本号,补丁版本号]

  1. 用 ~ 指示范围

    ~ 表示允许补丁版本升级,如果没有指定次要版本是,那么也允许次要版本升级,如:

    1
    2
    3
    ~1.2.3 >= 1.2.3 < 1.3.0
    ~1.2 >= 1.2.0 < 1.3.0
    ~1 >= 1.0.0 < 2.0.0
  2. 用 ^ 指示范围

    ^ 表示允许最左侧不为零的版本号右侧的版本号升级,如:

    1
    2
    3
    ^1.2.3 >=1.2.3 < 2.0.0
    ^0.2.3 >=0.2.3 < 0.3.0
    ^0.0.3 >=0.0.3 < 0.0.4

那么明白了这个再来看看,angular之前无法打包的问题,其实主要问题是在@angular/cli和@angular/xxx其他模块的版本都使用了^指定范围,所以^1.4.3会升级为1.5.0版本,但是其他的angular模块如@angular/core的4.3.3的版本号会停留在4.x.x.版本不会一起升至5.0.0,这样在重新npm install的时候就下载的不匹配版本的包,造成了上面的问题。

简单的修改办法就是不使用范围符指定版本, 直接写上固定的版本号,这样每次回下载相同的版本号,避免问题的发生,或者使用npm-check进行手动从angular4升级至angular5,这种跨大版本的升级还是应该小心避免的。