Metadata version mismatch with Angular 4

Your @angular/animations is on version 5.x.x and other @angular/ packages are on 4.x.x. All @angular/* packages must be aligned, i.e. have the exact same version number for the app to be able to compile.

The concrete error you're gettings comes from the .metadata.json files which have a "version" field inside. @angular/*@4.x.x uses version 3 and @angular/*@5.x.x uses version 4 (for now).

Problem solved: Simply run this command in terminal at your project directory location:

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' [email protected] rxjs@'^5.5.2'

This above command basically updates different angular modules to version 5.

Syntax:

npm install @angular/moduleName'^5.0.0'