Error when building Angular project Error: EINVAL: invalid argument, mkdir - node.js

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/

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.

Gitlab ci doesn't install all dependencies (angular app)

I'm trying to build and deploy angular application using gitlab-ci
here is my config
stages:
- build
build:
stage: build
image: node:12.21.0
only:
- master
script:
- npm install -g #angular/cli#11.2.6
- npm install
- npm run build:i18n
and here are my dependencies from package.json
"dependencies": {
"#agm/core": "^1.1.0",
"#angular/animations": "~11.2.5",
"#angular/common": "~11.2.5",
"#angular/compiler": "~11.2.5",
"#angular/core": "~11.2.5",
"#angular/fire": "^6.1.4",
"#angular/forms": "~11.2.5",
"#angular/localize": "^11.2.5",
"#angular/platform-browser": "^11.2.5",
"#angular/platform-browser-dynamic": "~11.2.5",
"#angular/router": "~11.2.5",
"#asymmetrik/ngx-leaflet": "^8.1.0",
"#ng-bootstrap/ng-bootstrap": "^6.2.0",
"#popperjs/core": "^2.9.1",
"#swimlane/ngx-datatable": "^17.1.0",
"#types/jquery": "^3.5.5",
"angular-calendar": "^0.28.22",
"angular2-text-mask": "^9.0.0",
"angularx-flatpickr": "^6.5.2",
"apexcharts": "^3.25.0",
"bootstrap": "^4.6.0",
"bourbon": "^4.3.4",
"chart.js": "^2.9.4",
"date-fns": "^1.30.1",
"easy-pie-chart": "^2.1.7",
"file-saver": "^2.0.5",
"firebase": "^7.0 || ^8.0",
"flatpickr": "^4.6.9",
"jquery": "^3.6.0",
"jquery-sparkline": "^2.4.0",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"ng-apexcharts": "^1.5.8",
"ng2-charts": "^2.4.2",
"ngx-chips": "^2.2.2",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-toastr": "^12.1.0",
"ngx-ui-switch": "^8.3.0",
"peity": "^3.3.0",
"popper.js": "^1.16.1",
"quill": "^1.3.7",
"rxjs": "^6.6.6",
"sweetalert2": "^7.33.1",
"text-mask-addons": "^3.8.0",
"tslib": "^2.1.0",
"zone.js": "~0.10.3"
},
npm run build:i18n is set to run ng build --prod --localize command.
Problem:npm run build:i18n fails every time with this error:
Error: src/app/merchandises/merchandises.service.ts:6:24 - error TS2307: Cannot find module 'file-saver/src/fileSaver' or its corresponding type declarations.
6 import { saveAs } from 'file-saver/src/fileSaver';
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: ./src/app/merchandises/merchandises.service.ts
But on my pc where I use same version of node, npm and nagular/cli it works just fine and file-saver package is clearly in dependencies. I'm not caching anything at this point (I did but I have removed it while testing).
Any ideas?
Try using a different image with Angular CLI :
build_front_end:
image: trion/ng-cli
https://hub.docker.com/r/trion/ng-cli/

Auto-downgrading all dependencies in Node

Bit of a noobish question here, I'm currently working on a project in angular. But I was wondering if it were possible to downgrade all the dependencies in that project so they're all compatible with each other. I'm currently using Angular Core 5.2.0 but it would appear that there is no version of 'ngx-signalr-hubservice' that is compatible with that angular version, it needs angular core 4.3.2... Here's what's in my packages.json:
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular-confirm": "^2.0.0-alpha.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-drag-drop": "^4.0.1",
"ng2-signalr": "^5.0.0",
"rxjs": "^5.5.6",
"signalr": "^2.2.3",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ngx-signalr-hubservice": "^2.0.7", <- This one is incompatible
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3",
"#angular-devkit/build-angular": "~0.6.8"
}
So... What's the best way to approach this? Also, this is my very first StackOverflow post, have mercy on me please ;)
There are lots of tools and helpful options for moving forward versions ... I don't know of any way to easily move backward.
You can do: npm install #angular/core#4.3.2
But you'd have to know exactly which version of each library you'd need.
You could try to install the older version of the Angular CLI and use it to generate a package.json file for you. Then you would know the right set of libraries you'd need to install.
I think that it was 'npm install -g #angular/cli#1.2.4` that was compatible with Angular 4.x.

Metadata version mismatch for module using angular

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"
},

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