Angular4 -> 在升级到5版本时出现元数据版本不匹配的错误

3 年 ago

清, 扬

2 minutes

记录在将Angular4升级到5时遇到的构建错误的解决方法。

事情的起因。

由于Angular5的主要版本已发布，我尝试升级自4版。像往常一样，我使用ncu -u命令进行了更新。

 @angular/animations                ^4.4.3  →  ^5.0.0   
 @angular/common                    ^4.4.3  →  ^5.0.0   
 @angular/compiler                  ^4.4.3  →  ^5.0.0   
 @angular/compiler-cli              ^4.4.3  →  ^5.0.0   
 @angular/core                      ^4.4.3  →  ^5.0.0   
 @angular/forms                     ^4.4.3  →  ^5.0.0   
 @angular/http                      ^4.4.3  →  ^5.0.0   
 @angular/platform-browser          ^4.4.3  →  ^5.0.0   
 @angular/platform-browser-dynamic  ^4.4.3  →  ^5.0.0   
 @angular/platform-server           ^4.4.3  →  ^5.0.0   
 @angular/router                    ^4.4.3  →  ^5.0.0   
 typescript                         ~2.5.2  →  ~2.6.1   
 @types/jasmine                      2.6.0  →   2.6.2   
 codelyzer                          ~3.2.0  →  ~4.0.0   
 protractor                         ~5.1.2  →  ~5.2.0   

The following dependencies are satisfied by their declar
 file anyway, run ncu -a.                               

 @angular/flex-layout  ^2.0.0-beta.9  →  ^2.0.0-beta.10 
 angularfire2            ^5.0.0-rc.2  →     ^5.0.0-rc.3 
 firebase                     ^4.4.0  →          ^4.6.0 
 rxjs                         ^5.4.3  →          ^5.5.2 
 @angular/cli                 ^1.4.3  →          ^1.5.0 
 @types/node                 ^8.0.31  →         ^8.0.47 
 tslint                       ^5.7.0  →          ^5.8.0

随后，当尝试使用 ng serve 启动时，会打印出以下错误。

λ ng serve

..(省略)

ERROR in Error: Metadata version mismatch for module D:/develop/repositories/git/02_github/ne-peer/deredorm/src/app/app.module.ts, found version 3, expected 4
    at StaticSymbolResolver.getModuleMetadata (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler\bundles\compiler.umd.js:31805:34)
    at StaticSymbolResolver._createSymbolsOf (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler\bundles\compiler.umd.js:31562:46)
    at StaticSymbolResolver.resolveSymbol (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler\bundles\compiler.umd.js:31221:14)
    at StaticReflector.findSymbolDeclaration (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler\bundles\compiler.umd.js:30338:67)
    at StaticReflector.findDeclaration (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler\bundles\compiler.umd.js:30313:21)
    at Object.listLazyRoutesOfModule (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler-cli\src\ngtools_impl.js:51:37)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@ngtools\webpack\src\plugin.js:241:66)
    at _donePromise.Promise.resolve.then.then.then.then.then (D:\develop\repositories\git\02_github\ne-peer\deredorm\node_modules\@ngtools\webpack\src\plugin.js:495:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

尽管我轻轻地在错误讯息上搜索了一下，但是我仍然无法找到具体的解决办法或原因。

我以为是npm的缓存问题，尝试使用npm cache clean进行清理，还尝试将Node版本从6升级到8，但问题没有解决。

解决方案 cè àn)

我在回答一个类似问题时看到了这样的建议：“如果将Angular升级到5系，也需要更新@angular/compiler-cli”。

Unable to debug Metadata version mismatch for module myapp/public/app/app.module.ts, found version 3, expected 4 – stackoveflow

尽管这篇文章没有提到，但我在观察周围的问题时发现了一篇关于”首先卸载npm，然后重新安装”的文章，所以我按照下面的步骤操作。

npm uninstall @angular/compiler-cli

npm install @angular/compiler-cli

在执行 `ng serve` 命令启动本地服务器后，不再出现错误。