search

Gbuomprisco / ngx-chips

Tag Input component for Angular
MIT License
899 stars 359 forks source link

ERROR in Metadata version mismatch .../node_modules/ngx-chips/ngx-chips.d.ts, found version 4, expected 3 #666

Closed rkalita closed 6 years ago

rkalita commented 6 years ago

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Current behavior Hi everyone! trying to implementing <tag-input></tag-input> but getting this error:

ERROR in Metadata version mismatch .../node_modules/ngx-chips/ngx-chips.d.ts, found version 4, expected 3

Minimal reproduction of the problem with instructions (if applicable) package.json:

{
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@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/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.3",
    "@ngx-translate/core": "^8.0.0",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.2",
    "angular-highcharts": "^4.1.0",
    "angular2-cookie": "^1.2.6",
    "angular2-jwt": "^0.2.3",
    "angular2-virtual-scroll": "^0.3.2",
    "angular4-jsoneditor": "^1.0.7",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "d3": "^4.12.0",
    "flag-icon-css": "^2.8.0",
    "highcharts": "^6.0.5",
    "intro.js": "^2.8.0-alpha.1",
    "jquery": "^2.1.4",
    "jquery-sparkline": "^2.4.0",
    "memcached": "^2.2.2",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "mydatepicker": "^2.6.1",
    "ng-click-outside": "^2.4.1",
    "ng2-charts": "^1.6.0",
    "ng2-dnd": "^2.2.0",
    "ng2-file-upload": "^1.3.0",
    "ng2-toasty": "^4.0.3",
    "ng2-ui-switch": "^1.0.2",
    "ngx-bootstrap": "^2.0.0-rc.0",
    "ngx-chips": "^1.6.3-rc.3",
    "ngx-popover": "0.0.16",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.0",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/highcharts": "^5.0.16",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "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.3.2",
    "typescript": "~2.3.3",
    "webpack-dev-server": "^2.9.7"
  }
}

What do you use to build your app?. Please specify the version angular-cli

Angular version: 4.2.4

ngx-chips version: 1.6.3-rc.3

Gbuomprisco commented 6 years ago

I think you need to upgrade Angular to v5, in alternative use 1.5.11

bhartendukumar12 commented 6 years ago

{ "name": "rome2-rio-poc", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build-dev": "ng build --environment=dev avot", "build-qa": "ng build --environment=qa avot", "build-prod": "ng build --environment=prod avot" }, "private": true, "dependencies": { "@angular/animations": "^4.2.4", "@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/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@ngui/scrollable": "^0.9.1", "@types/jquery": "^3.2.16", "angular2-jwt": "^0.2.3", "angular2-lightbox": "^1.2.1", "bootstrap": "^3.3.7", "bootstrap-datepicker": "^1.7.1", "bootstrap-daterangepicker": "^2.1.25", "bootstrap-select": "^1.12.3", "bxslider": "^4.2.13", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "jquery": "^3.2.1", "mydatepicker": "^2.6.1", "ng-multiselect-dropdown": "^0.1.1", "ng-tags-input": "^3.2.0", "ng2-datetime": "^1.4.0", "ng2-pdf-viewer": "^3.0.8", "ng2-tag-input": "~1.3.3", "ng2-tags-input": "^0.4.2", "ng2-toastr": "^4.1.2", "ngx-chips": "~1.5.11", "ngx-facebook": "^2.4.0", "node-sass": "^4.7.2", "primeng": "^5.2.0", "rxjs": "^5.4.2", "select2": "^4.0.5", "slick-carousel": "^1.8.1", "sloc": "^0.2.0", "tilt.js": "^1.2.1", "vanilla-tilt": "^1.4.1", "video.js": "^6.1.0", "web-animations-js": "^2.2.5", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "^1.4.5", "@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", "ngx-bootstrap": "^1.9.3", "ngx-perfect-scrollbar": "^4.9.6", "ngx-typeahead": "0.0.21", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.3.3" } } for the Above configuration i still face the same issue Uncaught Error: Template parse errors: 'tag-input' is not a known element:

  1. If 'tag-input' is an Angular component, then verify that it is part of this module.
  2. If 'tag-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" class="easySteps" id="ContentPoint">
    title

    [ERROR ->]<tag-input [(ngModel)]='items'>

    Gbuomprisco commented 6 years ago

    Have you imported the module?

    bhartendukumar12 commented 6 years ago

    yes i have import { TagInputModule } from 'ngx-chips';

    Gbuomprisco commented 6 years ago

    you also need to register it. Maybe up your app.module.ts

    bhartendukumar12 commented 6 years ago

    you also need to register it. Maybe up your app.module.ts

    imports: [ BrowserModule, FormsModule, HttpModule,

    TagInputModule

    ]

    added this in imports still i see the same issue

    Gbuomprisco commented 6 years ago

    Try copy all modules as in the example app in this repository

    DatTram0610 commented 6 years ago

    Don't forget to stop terminal, run command npm install to make sure ngx-chips's version is 1.5.11, then start your Angular application again.

    sukhjeet81 commented 6 years ago

    Hello, I am facing same problem. none of the above solution help me :-(

    sarancruzer commented 6 years ago

    Hi I am facing same problem.

    ERROR in Error: Metadata version mismatch for module /var/www/html/AI/chatbot-dev/bot-client-dev/node_modules/ngx-chips/ngx-chips.d.ts, found version 4, expected 3, resolving symbol AppModule in /var/www/html/AI/chatbot-dev/bot-client-dev/src/app/app.module.ts, resolving symbol AppModule in /var/www/html/AI/chatbot-dev/bot-client-dev/src/app/app.module.ts

    Gbuomprisco commented 6 years ago

    Delete node modules and reinstall

    sarancruzer commented 6 years ago

    Thank you It's working now :+1:

    ldoloscan commented 6 years ago

    Hey there, I'm on Angular 4.4.7 and downgraded this package to 1.5.11 and still getting this error, how can I get away with this ?

    Thanks in advance.

    umarsuhail commented 5 years ago

    grep -rl "\"version\":4" --include=*metadata.json | xargs -i@ sed -i 's/\"version\":4/\"version\":3/g' @

    • © Githubissues.
    • Githubissues is a development platform for aggregating issues.