Metadata version mismatch for module using angular - node.js

when I try to type the command "npm start". I got this error :
ERROR in Error: Metadata version mismatch for module C:/Users/zack/Desktop/projects/my_project/node_modules/#ng-bootstrap/ng-bootstrap/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Users/zack/Desktop/projects/my_project/src/app/app.module.ts, resolving symbol AppModule in C:/Users/zack/Desktop/projects/my_project/src/app/app.module.ts, resolving symbol AppModule in C:/Users/zack/Desktop/projects/my_project/src/app/app.module.ts
I really don't know what causing the issue. I have install earlier #angular/cdk and #angular/material to its latest version by hoping it will fix the problem but it isn't.
Below is my dependencies from package.json
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/flex-layout": "2.0.0-beta.8",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.1",
"#ngtools/json-schema": "^1.1.0",
"angular2-cool-storage": "^3.1.0",
"angular2-image-upload": "^1.0.0-rc.0",
"angular2-ladda": "^1.2.0",
"angular2-moment": "^1.7.0",
"angular2-multiselect-dropdown": "^1.2.6",
"angular2-notifications-lite": "^0.1.2",
"common-tags": "^1.4.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"lodash": "^4.17.3",
"moment": "^2.18.1",
"ng-block-ui": "^0.9.2",
"ng2-dropdown-multiselect": "^1.2.0",
"ng2-file-drop": "^1.1.0",
"ng2-file-upload": "^1.2.1",
"ng2-file-uploader": "^0.1.4",
"ng2-inputmask": "^0.2.5",
"ng2-pdf-viewer": "^3.0.2",
"ng2-truncate": "^1.3.11",
"ngx-bootstrap": "^2.0.0-beta.7",
"ngx-gallery": "^3.1.3",
"ngx-quill": "^1.2.0",
"rxjs": "^5.1.0",
"swagger-js-codegen": "^1.10.1",
"time-ago-pipe": "^1.2.1",
"zone.js": "^0.8.4"
},

Related

npm start stop with exit status 3 : Failed to exec start script [Angular]

I'm new on Angular and I have to work on a project in this technology.I set up the project but when I run the npm start command, the process npm start stop suddenly : the ng serve fails. I tried to investigate but I found nothing that can fix my problem.
You can see the errors here : errors
npm version : 6.14.11
node version : v14.15.5
Dependencies in the package.json file :
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~11.0.3",
"#angular/compiler": "~11.0.3",
"#angular/core": "~11.0.3",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "~11.0.3",
"#angular/material": "^11.0.1",
"#angular/platform-browser": "~11.0.3",
"#angular/platform-browser-dynamic": "~11.0.3",
"#angular/platform-server": "~11.0.3",
"#angular/router": "~11.0.3",
"#angular/service-worker": "^11.0.3",
"#ngx-prism/core": "^2.0.1",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#types/prismjs": "^1.16.2",
"#types/socket.io-client": "^1.4.34",
"angular-http-server": "^1.9.0",
"app-root-path": "^3.0.0",
"chart.js": "^2.9.4",
"compodoc": "0.0.41",
"core-js": "^3.8.0",
"dotenv": "^8.2.0",
"http-server": "^0.12.3",
"http-status": "^1.5.0",
"jquery": "^3.5.1",
"ngx-captcha": "^8.0.1",
"ngx-countdown": "^11.0.0",
"ngx-countdown-timer": "^0.2.0",
"ngx-drag-drop": "^2.0.0",
"ngx-json-viewer": "^2.4.0",
"ngx-mat-select-search": "^3.1.4",
"ngx-pipes": "^2.7.5",
"ngx-socket-io": "^3.2.0",
"prismjs": "^1.22.0",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"socket.io-client": "^3.0.3",
"xls": "^0.5.1",
"xlsx": "^0.16.9",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.3",
"#angular/compiler-cli": "^11.0.3",
"#compodoc/compodoc": "^1.1.11",
"#types/chart.js": "^2.9.28",
"#types/jasmine": "3.6.2",
"#types/node": "^14.14.10",
"#types/source-map": "^0.5.7",
"#types/webpack": "^4.41.25",
"typescript": "~4.0.0"
}
Do you have an idea ?
I tried to run :
npm cache clean --force
npm install
npm start
But that don't help me.

Error when building Angular project Error: EINVAL: invalid argument, mkdir

When trying to build my (old) Angular project, I meeting this error message
Error: EINVAL: invalid argument, mkdir 'C:\Users\me\Documents\project\dist\C:\Users\me\Documents\project\node_modules\md2\select'
The command line I am using is the following one
ng build --prod --output-path=dist --env=env --sourcemap
My npm version is 8.5.4 and node is 12.18.4
I am on Windows 10
This is my dependencies (Old angular project)
"dependencies": {
"#angular/animations": "^4.3.6",
"#angular/cdk": "2.0.0-beta.11",
"#angular/common": "^5.0.0",
"#angular/compiler": "5.2.11",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "2.0.0-beta.11",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#ngrx/store": "^4.0.3",
"#swimlane/ngx-datatable": "11.1.5",
"angulartics2": "3.3.0",
"chart.js": "^2.9.3",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"cyrillic-to-latin": "^2.0.0",
"electron": "^1.8.8",
"file-saver": "^1.3.3",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"lodash": "^4.17.21",
"md2": "0.0.29",
"moment": "^2.24.0",
"ng-spin-kit": "^5.1.1",
"ng2-charts": "^1.6.0",
"ng2-img-cropper": "^0.9.0",
"outdated-browser-rework": "^2.1.3",
"rxjs": "^5.4.2",
"tinymce": "^4.6.7",
"xlsx": "^0.17.1",
"zone.js": "^0.8.14"},
Am I missing something ? I have tried to play with npmrc file, but no success.
Use WIN+R to open a small window of operation, and then enter '.' (dot) And click OK, so that you enter the system user directory of your C drive;
After entering the system user directory, you can find the file .npmrc This file, after opening this file, you can see the
now change whatever the prefix=xxxx value is. with the given image. And now try again.
This solved my problem. or lookup this link: https://www.programmersought.com/article/91716179653/

Angular 10 Warning: Entry point 'devextreme-angular..' contains deep import into module

I'm trying to build my angular app but I'm receiving this kind of warnings:
Warning: Entry point 'devextreme-angular/ui/data-grid' contains deep imports into '{path to node modules}/node_modules/devextreme/ui/data_grid', '{path to node modules}/node_modules/devextreme/bundles/dx.all', '{path to node modules}/node_modules/devextreme/ui/filter_builder', '{path to node modules}/node_modules/devextreme/ui/form', '{path to node modules}/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Then I have this error:
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
These are my node and angular versions:
Angular CLI: 10.2.1
Node: 12.18.3
OS: win32 x64
Angular: 10.2.4
In the produced log file I have:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
This is the package.json file:
"dependencies": {
"#angular/animations": "^10.2.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "^10.2.3",
"#angular/compiler": "^10.2.3",
"#angular/core": "^10.2.3",
"#angular/forms": "^10.2.3",
"#angular/material": "^10.2.7",
"#angular/material-moment-adapter": "^10.2.7",
"#angular/platform-browser": "^10.2.3",
"#angular/platform-browser-dynamic": "^10.2.3",
"#angular/platform-server": "^10.2.3",
"#angular/pwa": "^0.7.1",
"#angular/router": "^10.2.3",
"#angular/service-worker": "^10.2.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#tinymce/tinymce-angular": "^4.1.0",
"ajv": "^6.9.1",
"angular-oauth2-oidc": "^10.0.0",
"cdk-table-exporter": "^9.0.2",
"chalk": "^3.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"devexpress-diagram": "^1.0.17",
"devexpress-gantt": "^1.0.10",
"devextreme": "^20.2.3",
"devextreme-angular": "20.2.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"mat-table-exporter": "^9.0.2",
"moment": "^2.24.0",
"node": "^12.18.3",
"node-sass": "^4.9.2",
"popper.js": "^1.14.7",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.0.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1002.0",
"#angular-devkit/core": "^10.2.0",
"#angular-devkit/schematics": "^10.2.0",
"#angular/cli": "^10.2.0",
"#angular/compiler-cli": "^10.2.3",
"#angular/language-service": "^10.2.3",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~6.0.1",
"devextreme-cli": "1.2.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.12.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^3.9.6"
}
The build works fine on another machine with the same file. I can only think of something wrong in my node and angular/cli versions. I've already deleted node_modules folder and npm cache clean -f

Error: Metadata version mismatch for module #ionic-native/core/decorators.d.ts

I can build my ionic project with ionic cordova build ios but when I build with --release --prod options I got this error :
Error: Metadata version mismatch for module
node_modules/#ionic-native/core/decorators.d.ts, found version 4, expected 3
I know it's a #ionic-native plugins version issue but I cannot fix it. I found a lot of git issues or forum but no one have the same versions as me.
Here are my dependencies :
"dependencies": {
"#angular/common": "^4.4.7",
"#angular/compiler": "^4.4.7",
"#angular/compiler-cli": "^4.4.7",
"#angular/core": "^4.4.7",
"#angular/forms": "^4.4.7",
"#angular/http": "^4.4.7",
"#angular/platform-browser": "^4.4.7",
"#angular/platform-browser-dynamic": "^4.4.7",
"#firebase/app": "^0.1.10",
"#ionic-native/background-mode": "^4.17.0",
"#ionic-native/camera": "^4.17.0",
"#ionic-native/core": "^4.17.0",
"#ionic-native/facebook": "^4.17.0",
"#ionic-native/file": "^4.17.0",
"#ionic-native/file-transfer": "^4.17.0",
"#ionic-native/firebase-analytics": "^4.17.0",
"#ionic-native/google-maps": "^4.15.1",
"#ionic-native/google-plus": "^4.17.0",
"#ionic-native/in-app-browser": "^4.17.0",
"#ionic-native/in-app-purchase": "^4.17.0",
"#ionic-native/local-notifications": "^4.17.0",
"#ionic-native/media": "^4.17.0",
"#ionic-native/native-audio": "^4.17.0",
"#ionic-native/social-sharing": "^4.17.0",
"#ionic-native/splash-screen": "^4.17.0",
"#ionic-native/status-bar": "^4.17.0",
"#ionic-native/vibration": "^4.17.0",
"#ionic/storage": "^2.0.1",
"#ngx-translate/core": "6.0.1",
"#ngx-translate/http-loader": "0.0.3",
"#types/stripe": "^3.0.0",
"ajv": "^5.5.2",
"angular-svg-round-progressbar": "1.1.1",
"angular2-swiper": "^0.8.1",
"angularfire2": "^5.1.0",
"cordova-android": "^6.2.3",
"cordova-android-support-gradle-release": "^1.2.0",
"cordova-browser": "^4.1.0",
"cordova-ios": "^4.5.5",
"cordova-plugin-app-event": "^1.2.1",
"cordova-plugin-background-mode": "^0.7.2",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.1.0",
"cordova-plugin-device": "^1.1.7",
"cordova-plugin-facebook4": "^1.9.1",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-firebase-analytics": "^0.14.0",
"cordova-plugin-googleplus": "^5.3.2",
"cordova-plugin-inappbrowser": "^1.7.2",
"cordova-plugin-inapppurchase": "^1.2.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-media": "^5.0.2",
"cordova-plugin-nativeaudio": "^3.0.9",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.1",
"cordova-plugin-vibration": "^2.1.6",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.3",
"cordova-support-android-plugin": "^0.3.7",
"cordova-support-google-services": "^1.2.1",
"de.appplant.cordova.plugin.local-notification": "^0.8.5",
"dropbox": "^2.5.7",
"es6-promise": "^4.2.5",
"es6-promise-plugin": "^4.1.0",
"firebase": "^4.3.0",
"ionic-angular": "3.9.2",
"ionic-image-loader": "^4.1.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionic3-calendar": "git+https://github.com/ReaperSoon/ionic3-calendar.git",
"ionicons": "4.4.8",
"jquery": "^3.2.1",
"localforage": "^1.7.3",
"localforage-cordovasqlitedriver": "^1.6.0",
"ng-imgcache": "^1.0.1",
"ng2-simple-timer": "^1.3.5",
"promise-polyfill": "6.0.2",
"rxjs": "5.4.3",
"setimmediate": "^1.0.5",
"stripe": "^4.25.0",
"superagent": "^3.7.0",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.4",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.2.1",
"#ionic/lab": "1.0.9",
"in-app-purchase": "^1.10.6",
"typescript": "2.4.0"
},
Can anyone help me to find what's wrong with my dependencies versions ?
Thanks in advance
try to update all plugins from ionic to the latest
https://www.npmjs.com/package/cordova-check-plugins
Install it globally:
$ npm install -g cordova-check-plugins
Then run from the root of your Cordova project. You can optionally update outdated plugins interactively or automatically, e.g.
$ cordova-check-plugins --update=auto
Your #ionic-native/core version of ^4.17 expects Angular 5, but you've listed dependencies for Angular 4 (^4.4.7).
You can upgrade to "ionic-angular": "3.9.8" and "#angular/core": "5.2.11"
Remember to update the other angular dependencies to the same version as well (#angular/common, #angular/compiler, etc.)
Note: Some of your other dependencies that rely on angular v4 might also need to be upgraded.

Cannot find type definition file for 'node'

I am getting strange errors after updating angular, webpack and typescript.
Any idea what I could be missing?
When I run the app with npm start I get the following errors:
[at-loader] Cannot find type definition file for 'hammerjs'.
[at-loader] Cannot find type definition file for 'node'.
[at-loader] src\app\app.component.ts:26:14
Cannot find name 'require'.
[at-loader] src\app\app.component.ts:30:15
Cannot find name 'require'.
Here are the dependencies:
"dependencies": {
"#angular/common": "2.4.4",
"#angular/compiler": "2.4.4",
"#angular/core": "2.4.4",
"#angular/forms": "2.4.4",
"#angular/http": "2.4.4",
"#angular/material": "2.0.0-beta.1",
"#angular/platform-browser": "2.4.4",
"#angular/platform-browser-dynamic": "2.4.4",
"#angular/platform-server": "2.4.4",
"#angular/router": "3.4.4",
"#angularclass/conventions-loader": "^1.0.13",
"#angularclass/hmr": "~1.2.2",
"#angularclass/hmr-loader": "~3.0.2",
"#ng-bootstrap/ng-bootstrap": "1.0.0-alpha.18",
"angular2-jwt": "0.1.28",
"angular2-moment": "1.1.0",
"auth0-lock": "10.10.1",
"bootstrap": "4.0.0-alpha.5",
"cky-meta": "^1.0.2",
"core-js": "^2.4.1",
"hammerjs": "2.0.8",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"intl": "^1.2.5",
"ng2-img-cropper": "0.7.7",
"ng2-page-scroll": "3.2.1",
"ng2-sharebuttons": "1.1.5",
"reflect-metadata": "^0.1.9",
"rxjs": "5.0.3",
"web-animations-js": "2.2.2",
"zone.js": "0.7.6"
},
"devDependencies": {
"#angular/compiler-cli": "~2.4.4",
"#types/chai": "3.4.34",
"#types/core-js": "^0.9.35",
"#types/es6-shim": "^0.31.32",
"#types/hammerjs": "^2.0.33",
"#types/jasmine": "^2.5.41",
"#types/node": "^6.0.60",
"#types/protractor": "^4.0.0",
"#types/selenium-webdriver": "2.53.39",
"#types/source-map": "^0.5.0",
"#types/uglify-js": "^2.0.27",
"#types/webpack": "^2.2.2",
"add-asset-html-webpack-plugin": "^1.0.2",
"angular-router-loader": "^0.5.0",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.5.1",
"awesome-typescript-loader": "~3.0.0-beta.18",
"bootstrap-loader": "2.0.0-beta.19",
"codelyzer": "~2.0.0-beta.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.12.0",
"html-webpack-plugin": "^2.26.0",
"imports-loader": "^0.7.0",
"istanbul-instrumenter-loader": "1.2.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^1.4.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.1",
"ng2-facebook-sdk": "1.2.0",
"ngc-webpack": "^1.1.2",
"node-sass": "4.3.0",
"npm-run-all": "^4.0.1",
"parse5": "^3.0.1",
"postcss-loader": "1.2.2",
"protractor": "^4.0.14",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.1",
"rimraf": "~2.5.4",
"sass-loader": "4.1.1",
"script-ext-html-webpack-plugin": "^1.5.0",
"source-map-loader": "^0.1.6",
"string-replace-loader": "^1.0.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.5",
"ts-helpers": "1.1.2",
"ts-node": "^2.0.0",
"tslint": "4.3.1",
"typedoc": "^0.5.5",
"typescript": "2.1.5",
"typings": "2.1.0",
"url-loader": "^0.5.7",
"v8-lazy-parse-webpack-plugin": "^0.3.0",
"webpack": "2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "2.2.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "~2.4.0"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
Try re-importing the #types/node package by running this in the Package Manager Console in Visual Studio:
npm i -D #types/node
If a specific version must be used, you can specify:
npm i -D #types/node#6.0.10
That seems more likely to be a problem of versions within the typings.json file. Can you try the following?
typings install dt~node --save
typings install dt~core-js --save
typings install dt~hammerjs --save
It could either be a mismatched ts-node version in which updating ts-node should fix it found here or it could be an incorrect tsconfig.json found here
If these don't work here are some links you may find useful:
https://github.com/shlomiassaf/angular2-modal/issues/213
VS2015: "Cannot find type definition" and "File not found" errors
In my case, after doing an npm update I was getting this error. It disappeared by restarting my node server :
npm start
You might need to apply multiple solutions to solve this issue!
STEP 1
You might need to install missing typings from #types
it's already present and still you are getting this error proceed to step 2
STEP 2
If you are using ts-loader you will need to upgrade this
STEP 3 (Not applicable to all)
In some cases it's the webpack versioning which causes this error; upgrading to webpack version, ts-node, awesome-typescript-loader etc will solve it for you
STEP 4 (Angular only)
If you have used core-js upgrade its version
In general solution varies for all however its the node modules version where you will need to play around a bit! It's more of hit and try
All the best!

Resources