Error: Data path "" must NOT have additional properties(allowedCommonJsDependencies) when upgrading from Angular 11 to 12 - node.js

So I just updated the Angular version of my project from 11 to 12 and whenever I try to run the server, I get the following error:
Warning: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
"BuildCustomWebpackBrowserSchema" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Schema validation failed with the following errors:
Data path "" must NOT have additional properties(allowedCommonJsDependencies).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! smart-med#0.0.0 start: `node --max_old_space_size=8048 ./node_modules/#angular/cli/bin/ng serve --disable-host-check "pharmacy"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the smart-med#0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I have already tried deleting node_modules and package_lock-json and run npm i but it didn't work. Furthermore the file "allowedCommonJsDependencies" does not exist on angular.json
Package.json:
"dependencies": {
"#angular/animations": "~12.2.17",
"#angular/cdk": "~12.2.13",
"#angular/cli": "^12.2.18",
"#angular/common": "~12.2.17",
"#angular/compiler": "~12.2.17",
"#angular/core": "~12.2.17",
"#angular/forms": "~12.2.17",
"#angular/localize": "^12.2.17",
"#angular/material": "~12.2.13",
"#angular/material-moment-adapter": "~12.2.13",
"#angular/platform-browser": "~12.2.17",
"#angular/platform-browser-dynamic": "~12.2.17",
"#angular/router": "~12.2.17",
"#angular/service-worker": "~12.2.17",
"#auth0/angular-jwt": "^3.0.1",
"#auth0/auth0-spa-js": "^1.6.0",
"#devexpress/analytics-core": "^21.1.5",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"#ngxs/logger-plugin": "^3.4.3",
"#ngxs/router-plugin": "^3.4.3",
"#ngxs/store": "^3.4.3",
"#zxing/ngx-scanner": "^3.0.0",
"adal-angular4": "4.0.12",
"angular-tree-component": "~8.5.6",
"angularx-qrcode": "^2.3.7",
"bootstrap": "^3.4.1",
"core-js": "~3.6.4",
"devexpress-reporting-angular": "^21.1.5",
"devextreme": "^21.1.5",
"immer": "^2.0.0",
"keycloak-angular": "^7.3.1",
"keycloak-js": "^10.0.2",
"lodash-es": "^4.17.11",
"lodash.memoize": "^4.1.2",
"moment-timezone": "^0.5.23",
"ngx-infinite-scroll": "^9.0.0",
"ngx-mask": "^9.1.0",
"ngx-responsive": "^9.0.0",
"roboto-fontface": "^0.8.0",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-builders/custom-webpack": "~9.0.0",
"#angular-builders/jest": "~9.0.0",
"#angular-devkit/build-angular": "~12.2.18",
"#angular-devkit/build-ng-packagr": "~0.1002.4",
"#angular-devkit/schematics": "~12.2.18",
"#angular/compiler-cli": "~12.2.17",
"#angular/language-service": "~12.2.17",
"#babel/compat-data": "~7.9.0",
"#openapitools/openapi-generator-cli": "^2.2.3",
"#testing-library/angular": "^10.0.2",
"#testing-library/dom": "^7.24.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/user-event": "^12.1.6",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "~25.1.5",
"#types/lodash-es": "^4.17.3",
"#types/moment-timezone": "^0.5.12",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"http-server": "~0.12.1",
"husky": "^8.0.1",
"istanbul-combine": "^0.3.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"jest": "~25.2.7",
"jest-junit": "^10.0.0",
"lint-staged": "^10.2.11",
"ng-packagr": "^12.2.7",
"npm-run-all": "^4.1.5",
"prettier-stylelint": "^0.4.2",
"protractor": "~7.0.0",
"rimraf": "^2.6.3",
"scss-bundle": "^2.5.1",
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^6.0.0",
"stylelint-config-standard": "^18.2.0",
"ts-loader": "^5.4.4",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"tslint-plugin-prettier": "^2.0.1",
"typescript": "~4.3.5",
"webpack-bundle-analyzer": "^3.6.0",
"yamljs": "^0.3.0",
"yargs": "^17.1.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
How can I fix this?

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/

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

How to fix npm repository, when Validation Error occurs?

I encountered a problem when building a project with angular.
To build, I use:
npm install
To run, I use:
npm install
I'm getting an error:
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:412-465 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:495-547 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 Module build failed: Validation Error
URL Loader Invalid Options
options['name'] should NOT have additional properties options.limit should be number
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/font-awesome/css/font-awesome.min.css 6:576-627 # ./node_modules/font-awesome/css/font-awesome.min.css # multi (webpack)-dev-server/client?http://localhost:4200 ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/font-awesome/css/font-awesome.min.css ./node_modules/quill/dist/quill.snow.css ./src/styles.scss
I tried buid this on Windows 10, and on Ubuntu 18.04.
npm -v
6.4.1
node -v
v10.14.2
dependencies stored in 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",
"#types/uuid": "3.4.4",
"blueimp-load-image": "2.18.0",
"bootstrap": "4.0.0-beta.3",
"core-js": "2.4.1",
"exif-js": "2.3.0",
"file-saver": "1.3.3",
"font-awesome": "4.7.0",
"jquery": "3.2.1",
"mydatepicker": "2.6.1",
"ngx-quill": "1.6.0",
"popper.js": "1.12.5",
"rxjs": "5.4.2",
"tether": "1.4.0",
"zone.js": "0.8.14"
},
"devDependencies": {
"#angular/cli": "1.4.5",
"#angular/compiler-cli": "4.2.4",
"#angular/language-service": "4.2.4",
"#types/node": "^6.14.2",
"autoprefixer": "6.5.3",
"circular-dependency-plugin": "3.0.0",
"codelyzer": "~3.2.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.1",
"cssnano": "3.10.0",
"exports-loader": "0.6.3",
"file-loader": "0.10.0",
"html-webpack-plugin": "2.29.0",
"istanbul-instrumenter-loader": "2.0.0",
"less-loader": "4.0.5",
"license-webpack-plugin": "1.1.1",
"postcss-loader": "1.3.3",
"postcss-url": "5.1.2",
"protractor": "~5.1.2",
"raw-loader": "0.5.1",
"sass-loader": "6.0.3",
"source-map-loader": "0.2.0",
"style-loader": "0.13.1",
"stylus-loader": "3.0.1",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3",
"url-loader": "0.6.0",
"webpack": "~3.6.0",
"webpack-concat-plugin": "1.4.0",
"webpack-dev-server": "~2.7.1"
}
Probably some of these libraries are not used, but I do not want to delete them. Should I update some of them?
An error occurred during building and I did not see it. The error was connected with old version with font-awesome.

Cannot run npm install only on this project

I have run npm install many times on this project in the past and I know that it should work just fine. That being said I cannot run npm uninstall either but only on this project. I know this isn't a lot to go on, has anything changed with the format or is something incorrectly formatted?
When I run npm install it takes maybe 10 seconds and then I get this message.
npm ERR! code UNKNOWN npm ERR! UNKNOWN: unknown error, open 'D:\TFS
Source\xxx\xxx\node_modules.bin\ngc'
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Bailey
Miller\AppData\Roaming\npm-cache_logs\2017-12-27T14_41_52_431Z-debug.log
Side note: the ngc file is empty, and none of my text editors can open it. The debug log file is so long and has no clear way of finding errors.
package.json: Snippet
"dependencies": {
"#angular/common": "^4.2.6",
"#angular/compiler": "^4.2.6",
"#angular/core": "^4.2.6",
"#angular/forms": "^4.2.6",
"#angular/http": "^4.2.6",
"#angular/platform-browser": "^4.2.6",
"#angular/platform-browser-dynamic": "^4.2.6",
"#angular/router": "^4.2.6",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
"#ngrx/core": "^1.2.0",
"#ngrx/db": "^2.0.2",
"#ngrx/effects": "^2.0.4",
"#ngrx/router-store": "^1.2.6",
"#ngrx/store": "^2.2.3",
"#ngrx/store-devtools": "^3.2.4",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"moment": "^2.18.1",
"reselect": "^3.0.1",
"rxjs": "^5.4.2",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.6.2",
"#angular/compiler-cli": "4.2.6",
"#types/jasmine": "2.5.38",
"#types/node": "8.0.10",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ngrx-store-freeze": "^0.1.9",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}

Resources