Angular4 -> 5のアップデートで Metadata version mismatch が起きたとき

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に上げてみたりしたが解決せず。

解決策

似た事象の質問への回答で「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 uninstall して、再度installすること」という記事も合わせて見つけたので、次のように叩いた。

npm uninstall @angular/compiler-cli

npm install @angular/compiler-cli

その後 ng serve でローカルサーバを起動すると、エラーが発生しなくなった。