page - Desajuste de la versión de metadatos con Angular 4

meta tags angular 4

Question

Estoy trabajando en la aplicación Angular 4 y obtengo un error por debajo con el comando "npm start" -

ERROR en la discrepancia de la versión de Metadatos para el módulo C: /gitRepo/gmdias/gmdais-frontend/node_modules/@angular/animations/browser.d.ts, se encontró la versión 4, se esperaba 3, se resuelve el símbolo ɵf en C: / gitRepo / gmdias /gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts, resolviendo el símbolo BrowserAnimationsModule en C: / gitRepo / gmdias / gmdais-frontend / node_modules / @ angular / platform-browser / animations / index. d.ts, resolviendo el símbolo BrowserAnimationsModule en C: /gitRepo/gmdias/gmdais-frontend/node_modules/@angular/platform-browser/animations/index.d.ts

Aquí está mi archivo 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://[email protected]/stash/scm/pzn/gmdais-frontend.git"
  }
}

Answer 1

Problema resuelto: simplemente ejecute este comando en el terminal en la ubicación del directorio de su proyecto:

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''

Este comando anterior básicamente actualiza diferentes módulos angulares a la versión 5.

Sintaxis:

npm install @ angular / moduleName ''^ 5.0.0''

Answer 2

En caso de que no pueda actualizar su proyecto de Angular 4 a Angular 5, por alguna razón (tiempo), sugiero que busque este enfoque para resolver este error sin migrar. Use la utilidad de reparación de discrepancias para cambiar la versión en archivos de metadatos.

1. En un proyecto de Angular 4, instale el módulo de reparaciones de discrepancias al desarrollar dependencia

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

2. Cree un archivo JavaScript, por ejemplo rpmm.js, e ingrese el siguiente código de fragmento:

   const rpmm = require (''repair-mismatch''); rpmm ({módulos: [''ngx-vis'']});

Nota: En este caso, uso [email protected] (compilado con Angular 6) y quiero usar esto en un proyecto de Angular 4.

3. Ejecute este comando para cambiar la versión de metadatos en módulos específicos (ngx-vis):

   nodo rpmm.js

Para más detalles lea este artículo:

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

Answer 3

Mi solución fue degradar el paquete que estaba causando el error. Primero, sin embargo, tuve que encontrar qué versión del paquete tenía la versión inferior de metadatos. Para ello, inicié una nueva carpeta de prueba e instalé diferentes versiones de mi complemento hasta que encontré una que tenía una "version":3 en index.metadata.json

mkdir test_1
cd test_1
npm init
npm install @ionic-native/[email protected]

En mi caso, la versión 4.3.3 fue la última versión antes de que se actualizaran a Angular 5 (versión de metadatos 4)

Sin embargo, en última instancia, para aquellos que usan Ionic, tuve que actualizar a 3.9ic ionic de todos modos, para que también resolviera los problemas.

Answer 4

Puedes probar esto:

npm audit fix

y entonces

npm install

¡Me ha ayudado!

Answer 5

Su @angular/animations está en la versión 5.xx y otros @angular/ paquetes están en 4.xx Todos los paquetes @angular/* deben estar alineados, es decir, deben tener el mismo número de versión para que la aplicación pueda compilar.

El error concreto que está recibiendo proviene de los archivos .metadata.json que tienen un campo de "version" interior. @angular/*@4.xx usa la versión 3 y @angular/*@5.xx usa la versión 4 (por ahora).

Answer 6

Tenemos un problema similar en uno de nuestros proyectos. En el archivo package.json para algunos módulos que tienen problemas de compatibilidad con Angular 4 y Angular 5

Por ejemplo en package.json

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

Mostrar problemas al compilar / compilar código si su proyecto no tiene módulos compatibles con Angular 5. Por lo tanto, para solucionar estos problemas, necesitamos identificar su versión compatible con Angular 4 y necesitamos instalarlos manualmente con el siguiente comando

 npm install @ng-bootstrap/[email protected] --save

Del mismo modo, debemos verificar que la versión de los módulos compatibles con nuestro proyecto / nodo se actualice en nuestro package.json

Este método resolvió nuestros problemas. Por favor intente de esta manera

Answer 7

Tuve el mismo problema al actualizar angular de 4 a 5. El problema era que actualizaba solo mis dependencias de producto, pero me olvidé de actualizar también mis dependencias de desarrollo.