Components: Error: Metadata version mismatch

[jschulz-giant]

ERROR in Error: Metadata version mismatch for module /giant/cormoran/mgp-web/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /giant/cormoran/mgp-web/src/app/app.module.ts, resolving symbol AppModule in /giant/cormoran/mgp-web/src/app/app.module.ts

[vida25]

Hello! It seem you used the old version of @angular/material package; Try
npm install @angular/material@latest --save
npm install @angular/cdk@latest --save

[jschulz-giant]

thanks i think that did the trick :)

[tislars]

I have the same issue and @vida25 response did not work for me.

ERROR in Error: Metadata version mismatch for module /Users/lars/sites/foo-bar-frontend/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /Users/lars/sites/foo-bar-frontend/src/app/app.module.ts, resolving symbol AppModule in /Users/lars/sites/foo-bar-frontend/src/app/app.module.ts

My package.json file:

{
  "name": "foo-bar-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "ng build",
    "e2e": "ng e2e",
    "lint": "ng lint",
    "ng": "ng",
    "prestart": "ng build --prod && ./node_modules/.bin/ngc",
    "start": "ts-node src/server.ts",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^5.0.0-rc0",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/platform-server": "^4.4.6",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "webpack": "^3.8.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.9",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "^2.6.2",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
  }
}

[afsar-infobeans]

Facing the same issue

ERROR in Metadata version mismatch for module C:/Users/Afsar/ProjectNova_Website/node_modules/angular2-cool-storage/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Users/Afsar/ProjectNova_Website/src/app/app.module.ts, resolving symbol AppModule in C:/Users/Afsar/ProjectNova_Website/src/app/app.module.ts

[javierarocena]

I also have the same issue, even with latest @angular/cdk(^5.0.0-rc0) and @angular/material(^5.0.0-rc0)

ERROR in Error: Metadata version mismatch for module /Users/engine/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in /Users/engine/src/app/app.module.ts, resolving symbol AppModule in /Users/engine/src/app/app.module.ts

any ideas?

[reod]

@javierarocena, @afsar-infobeans, @TisLars: upgrading only @angular/material and @angular/cdk seems not be enough. Update all your dependencies to5.0.x version (I mean all: angular, angular-material and devDependencies such as compiler-cli etc.). That worked for me.

"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",

[L3eR0y]

@reod How can i update "@angular/compiler", "@angular/common"?

[afsar-infobeans]

@reod But want to check what are the dependencies for angular 5.Need to change a lot in my angular 4 current application

Below is my package.json
{
"name": "nova-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.4.3",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.4.3",
"@angular/compiler": "^4.4.3",
"@angular/core": "^4.4.3",
"@angular/forms": "^4.4.3",
"@angular/http": "^4.4.3",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.4.3",
"@angular/platform-browser-dynamic": "^4.4.3",
"@angular/router": "^4.4.3",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"angular2-cool-storage": "^3.0.2",
"angular2-jwt": "^0.2.3",
"bootstrap": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.0",
"ng2-cookies": "^1.0.12",
"ng2-truncate": "^1.3.10",
"rxjs": "^5.4.2",
"tslint-fix": "^0.1.0",
"zone.js": "^0.8.16"
},
"devDependencies": {
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.4.3",
"@angular/language-service": "^4.4.3",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^8.0.26",
"codelyzer": "^3.1.2",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4",
"protractor": "~5.1.2",
"ts-node": "~3.3.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"typings": "^2.1.1"
}
}

pls suggest

[javierarocena]

Updating dependencies worked for me!

Modified lines in package.json:
"dependencies": { "@angular/material": "^5.0.0-rc0", "@angular/cdk": "^5.0.0-rc0", "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^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/router": "^5.0.0", "rxjs": "^5.5.2" } "devDependencies": { "typescript": "^2.5.3" "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", }

[jschulz-giant]

i had also updated my node/npm to latest: 8.9.0 / 5.5.12:

@angular/cli: 1.4.7
node: 8.9.0
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.7
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

[adrianDY]

I updated everything I could to 5.0.0 but still couldn't get it to work...

"dependencies": {
        "@angular/animations": "^5.0.0",
        "@angular/cdk": "^5.0.0-rc0",
        "@angular/cli": "1.0.0",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/compiler-cli": "^4.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/material": "^5.0.0-rc0",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/router": "^5.0.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.60",
        "codelyzer": "~2.0.0",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.0.0",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lodash": "^4.17.4",
        "ng2-inline-editor": "^0.1.1-alpha.14",
        "ng2-toastr": "^4.0.1",
        "protractor": "~5.1.0",
        "rxjs": "^5.1.0",
        "ts-node": "~2.0.0",
        "tslint": "~5.3.2",
        "typescript": "^2.6.1",
        "zone.js": "^0.8.18"
    }

When I update compiler-cli to 5 I start getting this instead

Version of @angular/compiler-cli needs to be 2.3.1 or greater. Current version is "5.0.0".

[amcdnl]

The RC release is targeted for Angular5, so you will need to be on that version to use this release.

[adrianDY]

Thanks @amcdnl ! Works like a charm now!

[Jay-PC]

I am having the same issue, and reinstalling over existing and manually changing the package.json didn't help. Could anyone provide an example of the fastest way to rebuild from the command line once I clone my repository to a fresh folder? I know it sounds newb, but all the npm install switches and version combinations are killing me.

[jschulz-giant]

maybe delete contents of node_modules folder and re-install ?
npm install @angular/material@latest --save
npm install @angular/cdk@latest --save
etc... for all the dependencys u have

[KrUciFieR-Jr]

@amcdnl Thanks, It Worked!

[jeudywr]

After removing nodes_module and reinstall, I also had to run:

npm install --save-dev html-webpack-plugin webpack webpack-dev-server

[nikhildesu]

Guys it resolved after reinstalling the Angular CLI and latest npm. However it needs some manual efforts to create the project structure again. It doesn't worked when i import same work space which is available earlier (as it has old version labels in package.json) .

Here are the commands for your reference to reinstall NPM and CLI.
For NPM-- - > npm install npm@latest –g
For CLI ---- > To update/re-install angular CLI latest, use the below commands from node cmd
npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

[z-fantasy]

ERROR in Error: Metadata version mismatch for module D:/minprogram/angularDome/node_modules/ngx-filesaver/index.d.ts,
found version 4, expected 3, resolving symbol AppModule in D:/minprogram/angularDome/src/app/app.module.ts, resolvin
g symbol AppModule in D:/minprogram/angularDome/mobileNg/src/app/app.module.ts
Please help me…

[jansivans]

For me problem was fixed after removing node_modules folder and installing packages with latest version from scratch.

[Jay-PC]

@nikhildesu i attempted your first command npm install npm@latest –g, and got this..
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "–g": Tags may not have any characters that encodeURIComponent encodes.

I'm assuming I have to drop the -g?

[Jay-PC]

Again... newb thing here, but it sure would be sweet to have a single list of all the commands to fix this problem. For example, if I clone my project from github to a clean directory, there is not "node-modules" to delete. And some commands fail with wrong additional parameters. anyone have a link to a clean, complete set of commands for rebuilding project when you get the above error? cobbling together from different answers here in order doesn't seem to work.

[nikhildesu]

@Jay-PC "g" is used to install it globally. Hope you're executing from Node cmd.. Try opening node as Administrator and execute it

[jackrvaughan]

I had to update "@angular/cli": "^1.5.0" in deveDependencies (locally) to get this to work.

[Jay-PC]

Here is where I am now... and, I'm still attempting to create the precise steps with correct parameters/flags.... and get the fewest warnings from doing things out of sequence.

• download the site from Github into a zip file in downloads, unzip into the target, empty project folder
• run node.js command as administrator, get in project folder

npm install npm@latest -g
npm uninstall -g angular-cli
npm cache clean --force
npm install -g @angular/cli@latest

npm install --save rxjs@latest
npm install --save zone.js@latest
npm install @angular/common@latest --save
npm install @angular/core@latest --save
npm install @angular/cdk@latest --save
npm install --save hammerjs@latest
npm install @angular/material@latest --save
npm install @angular/core@latest --save
npm install @angular/animations@latest --save
npm install @angular/platform-browser@latest --save
npm install @angular/forms@latest --save
npm install @angular/http@latest --save

Now when i run "ng serve", i get the following error...

Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install. Please make sure your package.json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock.json (if you have one) and run npm install again.

I have followed these instructions, but still get the same error message.

[Breakor]

@reod thanks, it worked for me : update all dependencies to 5.0.x, in addition, update ts to 2.4.x above "typescript": "~2.4.2"

[josephperrott]

Closing as we are not seeing issues in situations in which all @angular/ are up to date and the necessary peerDeps (as defined by each package) are met.

[Ram-SR]

Upgrading these packages is working.

"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@angular/cli": "^1.5.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",

But can we resolve the error without upgrading? And my application is in Angular4. Upgrading above packages means converting application to Angular5 or what? If it is, then I don't want to upgrade them

[afsar-infobeans]

@Ram-SR Yes i Too strongly agree with you. My question is also the same why to switch i dont need to upgrade for now.

[franksimon90]

I have a huge, very huge Angular 4.2.4 project now, the client dont want to upgrade to Angular 5 because corporative LTS policies and bull*t like that, im just the last part of the chain here...then, question, what can i do??, just edit the packages an put "@angular/cdk": "^2.0.0-beta.12" (this works by the way..)??

[fdambrosio]

I have the same problem, what's happen?

[Jay-PC]

Here is what i was able to figure out so far...

1. Keep the backup of your previous website safe! Especially the Angular cdk and material folders under node_modules. Until you can figure out where non-numbered sting paths in your package.json file resolved to--for example, I had two... "github:angular/cdk-builds" and "github:angular/material2-builds". These resulted in the new 5.x versions of just these being installed, which broke all of my 4.x material modules. The incorrect fix for this was to upgrade ALL of my angular modules to 5.x, which in turn broke other things... like "mat-card" and "md-toolbar" became an "unknown elements" and broke the site. I'm hoping the Angular folks will fix this in the near future.

2. If you totally trust your backups... blow away the main dev folder you may have for your site 😉

3. Clone your site using Github’s desktop app--pick a last known good version with Angular 4.x files. It should automatically realize you deleted it from your dev folder and give you three choices… use the one that clones it (I think it’s the middle button). Delete any string paths for modules in your package.json file like my two examples above.
4. Start Git Bash, and change directory to the main directory for your site.
5. Type in “npm install” (don’t add anything else! all we want is for the package.json file to direct the older versions of the modules to be installed with no further updates to the package.json file itself)
6. Now copy any other module folders on your backup of the last good version of your site.... for me it was cdk and material mentioned above

copy from ..\yoursitebackup\node_modules\@angular\ these two folders: cdk and material
paste them into ..\yourdevsite\node_modules\@angular\ (into the project you just cloned)

That’s all there is to it! You can check out your new instance by typing “ng server” in Git Bash. It worked for me. You will have to repeat that copy step every time you add some new module to your site. Recently, someone posted where my string paths for cdk and material probably resolved to before... "^2.0.0-beta.12" but I haven't had the time to try that repair to the package.json file yet... sounds like it would work though.

[jimmy-khalifa]

I am using the latest version 5.0.0-rc0 and I was able to solve the problem by deleting the node_modules folder and run npm install with the following package.json
"dependencies": { "@angular/animations": "^5.0.1", "@angular/cdk": "^5.0.0-rc0", "@angular/common": "^5.0.1", "@angular/compiler": "^5.0.1", "@angular/core": "^5.0.1", "@angular/forms": "^5.0.1", "@angular/http": "^5.0.1", "@angular/material": "^5.0.0-rc0", "@angular/platform-browser": "^5.0.1", "@angular/platform-browser-dynamic": "^5.0.1", "@angular/router": "^5.0.1", "body-parser": "^1.18.2", "core-js": "^2.4.1", "express": "^4.16.2", "hammerjs": "^2.0.8", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.5.0", "@angular/compiler-cli": "^5.0.1", "@angular/language-service": "^5.0.1", "@types/jasmine": "~2.6.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~8.0.51", "codelyzer": "~4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.0", "karma-chrome-launcher": "~2.2.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.2.0", "ts-node": "~3.3.0", "tslint": "~5.8.0", "typescript": "~2.6.1" }
I have a warning about typescript version but everythings works fine
Thank you

[Mr-Roberts]

I fixed mine with these steps:

**installed NCU from here https://www.npmjs.com/package/npm-check-updates

npm install -g npm-check-updates
ncu
ncu -u
npm install npm@latest -g
npm uninstall -g angular-cli
npm cache clean --force
npm install -g @angular/cli@latest
ng serve

[recallhyx]

I encouter this problem when I use webpack [email protected], I change webpack version to 7.0.0 it fixed

[skyfloyd]

https://angular-update-guide.firebaseapp.com/

[AshanthaLahiru]

My error was
ERROR in Error: Metadata version mismatch for module E:/Open Source Projects/Scorum/Scorum-UI/Scorum/node_modules/ng2-img-max/dist/ng2-img-max.d.ts, found version 4, expected 3, resolving symbol AppModule in E:/Open Source Projects/Scorum/Scorum-UI/Scorum/src/app/app.module.ts, resolving symbol AppModule in E:/Open Source Projects/Scorum/Scorum-UI/Scorum/src/app/app.module.ts
I used,

ng2-img-max 2.1.9

Problem solved by

ng2-img-max 2.1.1

[Jalins]

I have same issue and the problem has been solved by:

npm install @angular/[email protected] --save
npm install @angular/[email protected] --save

I didn't upgrade the others so you can try. @Ram-SR

[shiamalon]

@jschulz-giant thanks, worked for me

[pegutierrez]

You can try this solution with ngx-flash-messages https://yarnpkg.com/en/package/ngx-flash-messages

[Mayocampo]

ERROR in error : Metadata version mismatch for module someRoute/node_modules/@angular/flex-layout/typings/index.d.ts, found version 4, expected 3, resolving symbol AppModule in someRoute/MyApp/src/app/app.module.ts, resolving symbol AppModule in someRoute/MyApp/src/app/app.module.ts

This things keep failing. In my case, all works like a charm locally so has no point to upgrade dependencies... but when we are deploying site on Azure, things just broke apart... its the first time this happen and we already made a lot of deploys...

This thread shouldnt be closed.

@angular/cli: 1.4.9
node: 6.11.3
os: win32 x64
@angular/animations: 4.4.6
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

those are my current versions. Any thoughs on this? Thank you

[vpcom]

Following @jschulz-giant's comment, as I wanted to keep Angular 4, I updated the package.json dependencies as follows:

```
"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/cdk": "^5.0.2", --> "@angular/cdk": "2.0.0-beta.12",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^5.0.2", --> "@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.4.6",
"@ngrx/router-store": "^4.1.1",
"@ngrx/store": "^4.1.1",
"@ngrx/store-devtools": "^4.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.5",
"zone.js": "^0.8.14"
},

... and so far, I can use my first Material components!

PS: With the additional commands:

rm -r node_modules
npm install
```

[PhillipMwaniki]

I'm also having this error with angular 4. I have not updated to 5 and I would like to keep it that way.
Here is the error
ERROR in Error: Metadata version mismatch for module D:/code/bookstore/bookstore-admin/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol MaterialModule in D:/code/bookstore/bookstore-admin/src/app/material.module.ts, resolving symbol MaterialModule in D:/code/bookstore/bookstore-admin/src/app/material.module.ts

Here is my package.json file
"dependencies": { "@angular/animations": "^4.2.4", "@angular/cdk": "^5.0.2", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/material": "^5.0.2", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.9", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.3.3" }
I have tried all fixes above and they do not work.

[pegutierrez]

Hi @PhillipMwaniki I have been struggling with the same issue like, everyday I run the ng serve on my app. What I found yesterday is that material is no longer supported with versions of @angular/core behind 4, and it just works with angular 5, I was not sure about to upgrade my dependencies to angular 5, so what I made: I commented the lines that were giving me the error, I ran ng serve, then I uncommented again and It worked.

I'm pretty sure that the error will be solved if we update the dependencies to angular 5.
I will keep following the thread, let me know. Good luck!

[PhillipMwaniki]

Hi @pegutierrez, it actually worked. I've moved to version 5. I hate how angular is forcing updates on projects.

[vincechan]

@Mayocampo I got a similar error on an Angular 4 app
ERROR in Metadata version mismatch for module .../node_modules/@angular/flex-layout/typings/index.d.ts, found version 4, expected 3

flex-layout updated the package dependencies to angular to ~5.1.0 in their 2.0.0-beta.12 release on 2017-12-14. See their changelog. In our package.json file, we have this dependency: "@angular/flex-layout": "^2.0.0-beta.8". The (^) will match any 2.x.x release. As a result, in our new build, it will grab the 2.0.0-beta.12 version of flex-layout, which has a different version of angular. To fix it, I just update the flex-layout dependencies to "@angular/flex-layout": "2.0.0-beta.8" (without the caret) and it worked.

With the release of Angular 5, many packages probably updated their dependencies to Angular 5. Depends on how you specify your dependencies to these packages, you might get updated to a new version that now has different angular version than yours.

[KXPN]

I had a similar problem:

ERROR in Error: Metadata version mismatch for module ROUTE/node_modules/jw-bootstrap-switch-ng2/dist/index.d.ts, found version 4, expected 3, resolving symbol AppModule in ROUTE/src/app/app.module.ts, resolving symbol AppModule in ROUTE/src/app/app.module.ts`

So I googled Metadata version mismatch for module and I arrived here

My solution was to change said dependency line in package.json from:
"jw-bootstrap-switch-ng2": "^1.0.4",
to:
"jw-bootstrap-switch-ng2": "1.0.4",
thus preventing Node from trying to find a newer version

The best way would be to probably find the requirements of the new version and try to comply, but if you're in a hurry like me this can save some time

[Rakesh2907]

ERROR in Error: Metadata version mismatch for module D:/wamp/www/guru-able-angul
ar-4-lite/guru-lite/node_modules/@ng-bootstrap/ng-bootstrap/index.d.ts, found ve
rsion 4, expected 3, resolving symbol SharedModule in D:/wamp/www/guru-able-angu
lar-4-lite/guru-lite/src/app/shared/shared.module.ts, resolving symbol SharedMod
ule in D:/wamp/www/guru-able-angular-4-lite/guru-lite/src/app/shared/shared.modu
le.ts, resolving symbol SharedModule in D:/wamp/www/guru-able-angular-4-lite/gur
u-lite/src/app/shared/shared.module.ts
at syntaxError (D:\wamp\www\guru-able-angular-4-lite\guru-lite\node_modules\
@angular\compiler\bundles\compiler.umd.js:1729:34)

[George23792M]

I tried all the above solutions but my error is not solved. Can someone help me

[JayanMistry]

2 pluz tuw iz 4 minuz 1 datz free #kwikmafzz

[malkesh]

If you don't want to upgrade all your Angular packages then you can downgrade the conflicting package to a version that is compatible with your existing Angular version.

[StepanBohdan]

I tried everything above, but it didn`t help me, but after delete module and than write one more time everything become ok, strange but it helps me

[vishjmdr09]

i am having the same problem of angular material ,found version 4 ,expected 3,so if anyone has a solution to this ,please

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}