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 もアップデートすること」というのを見つけた。
この記事には書いてないが、この周りの質問を見ていると「一度 npm uninstall して、再度installすること」という記事も合わせて見つけたので、次のように叩いた。
npm uninstall @angular/compiler-cli
npm install @angular/compiler-cli
その後 ng serve でローカルサーバを起動すると、エラーが発生しなくなった。