元数据版本与Angular 4不匹配

时间：2017-11-04 21:07:08

标签： angular

我正在使用Angular 4应用程序并使用“npm start”命令 -

获得以下错误
  

模块中元数据版本不匹配的错误   C：/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/animations/browser/browser.d.ts，   发现版本4，预期3，解决符号ɵfin   C：/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-b​​rowser/animations/index.d.ts，   解析符号BrowserAnimationsModule in   C：/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-b​​rowser/animations/index.d.ts，   解析符号BrowserAnimationsModule in   C：/gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-b​​rowser/animations/index.d.ts

这是我的package.json文件

{
  "name": "nucleus-web",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "transpile": "ngc",
    "package": "rollup -c",
    "minify": "uglifyjs dist/bundles/datatable.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/datatable.min.js",
    "build": "npm run transpile && npm run package && npm run minify && ng build",
    "ng": "ng",
    "start": "ng serve",
    "postinstall": "ng build",
    "test": "sh build.sh"
  },
  "private": true,
  "peerDependencies": {
    "@angular/core": "^4.0.1"
  },
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^4.2.5",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.4.4",
    "@angular/router": "^4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "bootstrap": "3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng2-file-upload": "^1.2.1",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "^1.7.1",
    "ngx-treeview": "1.2.3",
    "ngx-webstorage": "^1.8.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "1.0.3",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^3.2.15",
    "@types/node": "~8.0.33",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~3.3.0",
    "tslint": "~4.5.0",
    "@angular/compiler": "^4.4.4",
    "@angular/compiler-cli": "^4.4.4",
    "rollup": "^0.50.0",
    "typescript": "^2.5.3",
    "uglify-js": "^3.1.3"
  },
  "repository": {
    "type": "git",
    "url": "ssh://git@stash.aexp.com/stash/scm/pzn/gmdais-frontend.git"
  }
}

8 个答案:

答案 0 :(得分：21)

您的@angular/animations位于版本5.x.x上，其他@angular/个包位于4.x.x。所有@angular/*个包必须对齐，即具有完全相同的版本号才能使应用程序能够编译。

您获得的具体错误来自.metadata.json个文件，其中包含"version"字段。 @angular/*@4.x.x使用版本3，@angular/*@5.x.x使用版本4（暂时）。

答案 1 :(得分：7)

  

问题解决了：   只需在项目目录位置的终端中运行此命令：

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' typescript@2.4.2 rxjs@'^5.5.2'

以上命令基本上将不同的角度模块更新为版本5.

<强>语法：

  

npm install @ angular / moduleName '^ 5.0.0'

答案 2 :(得分：4)

当将角度从4更新为5时，我遇到了同样的问题。问题是我只更新了我的prod依赖项，但我也忘了更新我的dev依赖项。

答案 3 :(得分：1)

我们在其中一个项目中遇到了类似的问题。在package.json文件中，某些模块与Angular 4和Angular 5具有兼容性问题

例如package.json 

  "@ng-bootstrap/ng-bootstrap": "1.0.0",

如果项目没有与Angular 5兼容的模块，则在构建/编译代码时显示问题。因此，为了解决这些问题，我们需要使用Angular 4识别其兼容版本，并需要使用以下命令手动安装

 npm install @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 --save

同样，我们需要检查我们的package.json中需要更新的项目/节点兼容版本的模块

这种方法解决了我们的问题。请尝试这种方式

答案 4 :(得分：0)

我的解决方案是降级导致错误的软件包。不过，首先，我必须找到该软件包的哪个版本的元数据版本较低。为此，我启动了一个新的测试文件夹，并安装了不同版本的插件，直到在"version":3中找到一个带有index.metadata.json的插件为止

mkdir test_1
cd test_1
npm init
npm install @ionic-native/code-push@4.3.3

就我而言，4.3.3是升级到Angular 5之前的最新版本（元数据版本4）

尽管如此，最终，对于那些使用Ionic的用户，无论如何我都必须升级到ionic 3.9.2，从而也解决了这些问题。

答案 5 :(得分：0)

您可以尝试以下方法：

npm audit fix

然后

npm install

对我有帮助！

答案 6 :(得分：0)

如果由于某种原因（时间）您无法将Angular 4项目更新到Angular 5，我建议您使用这种方法来解决此错误而不进行迁移。使用修复失配实用程序来更改元数据文件的版本。

  1. 在Angular 4项目中，根据开发需要安装repair-mismatch模块

    npm我@ jagcolombat / repair-mismatch --save-dev

  2. 创建一个文件JavaScript，例如rpmm.js，并输入以下代码段：

    const rpmm = require（'repair-mismatch'）; rpmm（{modules：['ngx-vis']}）;

注意：在这种情况下，我使用ngx-vis@1.0.1（与Angular 6编译），并且我想在Angular 4项目中使用它。

  1. 运行此命令以更改指定模块（ngx-vis）中的元数据版本：

    节点rpmm.js

有关更多详细信息，请阅读本文：

https://medium.com/@tonytunes2005/solving-error-mismatch-beetwen-angular-versions-b051e7cde418

答案 7 :(得分：0)

遇到此错误？

错误，错误：模块E：/SanthoshRaj-Work/Angular/clientpanel/node_modules/@angular/fire/index.d.ts的元数据版本不匹配，找到版本4，预期为3，在E：/中解析符号AppModule SanthoshRaj-Work / Angular / clientpanel / src / app / app.module.ts，在E：/SanthoshRaj-Work/Angular/clientpanel/src/app/app.module.ts中解析符号，在E：/中解析符号AppModule SanthoshRaj-Work / Angular / clientpanel / src / app / app.module.ts     语法错误（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler \ bundles \ compiler.umd.js：1729：34）     在simpleInContext（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler \ bundles \ compiler.umd.js：24979：23）     在StaticReflector.simplify（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler \ bundles \ compiler.umd.js：24991：13）     在StaticReflector.annotations（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler \ bundles \ compiler.umd.js：24418：41）     在_getNgModuleMetadata（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler-cli \ src \ ngtools_impl.js：138：31）     在_extractLazyRoutesFromStaticModule（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler-cli \ src \ ngtools_impl.js：109：26）     在Object.listLazyRoutesOfModule（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler-cli \ src \ ngtools_impl.js：53：22）     在Function.NgTools_InternalApi_NG_2.listLazyRoutes（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ angular \ compiler-cli \ src \ ngtools_api.js：91：39）     在AotPlugin._getLazyRoutesFromNgtools（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ ngtools \ webpack \ src \ plugin.js：212：44）     在_donePromise.Promise.resolve.then.then.then.then然后（E：\ SanthoshRaj-Work \ Angular \ clientpanel \ node_modules @ ngtools \ webpack \ src \ plugin.js：448：24）     在process.internalTickCallback（internal / process / next_tick.js：77：7）

执行以下步骤：

步骤1：您需要将Angular 版本4 更新为Angular 版本5 。就是这样，对我来说很好。

步骤2：安装以下所有依赖项

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-b​​rowser @'^ 5.0.0'@ angular / platform-b​​rowser-dynamic@'^5.0.0'@ angular / platform-server @'^ 5.0.0'@ angular / router @'^ 5.0.0'typescript@2.4.2 rxjs @'^ 5.5.2'< / p>

谢谢。

相关问题
最新问题