Unmet Peer dependency warning even after installing the peer dependency - npm

I'm trying to add redux to an Ionic 3+ application. This is what I ran:
npm i redux #angular-redux/store flux-standard-action redux-logger --save
I get the following error: UNMET PEER DEPENDENCY redux#4.0.1
So, I then completed the following steps to try to rectify the issue:
rm -rf node_modules/
npm cache clean
npm install redux#4.0.1 --save
This gives me the same err: UNMET PEER DEPENDENCY redux#4.0.1
How can it be a dependency of itself? Something weird is going on. I've tried rearranging where in the package.json the listing falls, to no avail. Help please. Below is my package.json
{
"name": "ionic-testing-elite-ionic",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"e2e-update": "webdriver-manager update --standalone false --gecko false",
"e2e-test": "protractor ./test-config/protractor.conf.js",
"e2e": "npm run e2e-update && npm run e2e-test"
},
"dependencies": {
"#angular-redux/store": "^7.1.1",
"#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",
"#ionic-native/core": "3.12.1",
"#ionic-native/splash-screen": "3.12.1",
"#ionic-native/status-bar": "3.12.1",
"#ionic/storage": "2.1.3",
"flux-standard-action": "^2.0.3",
"ionic-angular": "^3.9.2",
"ionicons": "3.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.0",
"#types/jasmine": "^2.5.41",
"#types/node": "^7.0.8",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.4.5",
"ionic": "3.9.2",
"jasmine": "^2.5.3",
"jasmine-spec-reporter": "^4.1.0",
"karma": "^1.5.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"null-loader": "^0.1.1",
"protractor": "^5.1.1",
"ts-loader": "^2.0.3",
"ts-node": "^3.0.2",
"typescript": "2.4.2"
},
"version": "0.0.1",
"description": "An Ionic project"
}

OK. I read some more into the error I was getting. The problem was that the current redux package which was being installed by default was not compatible with the version of #angular-redux/store which was being installed. There has been a major version upgrade to redux which isn't backwards compatible. I had to install redux#3.7.2 and it fixed the problem.

Related

Error when activate Ivy compiler on Angular 10 error NG6003-could not resolve to a NgModule

We recently migrated our app to Angular 10 and PrimeNG 9, and now we are preparing to migrate these frameworks to the latest version.
We trying to prepare our app to migration and want to use Ivy Compiler as Angular recommends.
But when activate Ivy compiler and aot to true it shows the following error when do ng build:
ERROR in
node_modules/#maestro-ng/primeng/maestro-primeng.module.d.ts:1:22 -
error NG6003: Appears in the NgModule.exports of AppSharedModule, but
could not be resolved to an NgModule, Component, Directive, or Pipe
class.
This likely means that the library (#maestro-ng/primeng) which
declares MaestroPrimengModule has not been processed correctly by
ngcc, or is not compatible with Angular Ivy. Check if a newer version
of the library is available, and update if so. Also consider checking
with the library's authors to see if the library is expected to be
compatible with Ivy.
This is the complete package.json:
{
"name": "codex-frontend",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"dev": "ng serve -c dev --watch=false",
"postinstall": "ngcc",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^10.2.5",
"#angular/cdk": "^10.2.7",
"#angular/common": "^10.2.5",
"#angular/compiler": "^10.2.5",
"#angular/core": "^10.2.5",
"#angular/forms": "^10.2.5",
"#angular/platform-browser": "^10.2.5",
"#angular/platform-browser-dynamic": "^10.2.5",
"#angular/router": "^10.2.5",
"#fortawesome/fontawesome-free": "5.15.4",
"#fullcalendar/core": "5.9.0",
"#maestro-ng/core": "https://nexus.myorg.com.br/repository/npm-all/#maestro-ng/core/-/core-1.10.0.tgz",
"#maestro-ng/primeng": "https://nexus.myorg.com.br/repository/npm-all/#maestro-ng/primeng/-/primeng-1.10.0.tgz",
"#types/pdfjs-dist": "2.7.5",
"bootstrap": "5.1.1",
"chart.js": "3.5.1",
"core-js": "3.18.0",
"g": "2.0.1",
"jquery": "3.6.0",
"js-base64": "3.7.2",
"moment": "2.29.1",
"ng2-currency-mask": "9.0.2",
"ng2-pdfjs-viewer": "6.0.2",
"ngx-moment": "5.0.0",
"pdfjs-dist": "2.9.359",
"#popperjs/core": "2.10.1",
"primeflex": "2.0.0",
"primeicons": "4.0.0",
"primeng": "9.1.3",
"quill": "1.3.7",
"rxjs": "6.6.2",
"simple-pdf-viewer": "2.0.3",
"tslib": "2.3.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1000.8",
"#angular/cli": "^10.2.3",
"#angular/compiler-cli": "10.2.5",
"#angular/language-service": "10.2.5",
"#fortawesome/fontawesome-free": "5.8.2",
"#types/jasmine": "3.9.1",
"#types/jasminewd2": "2.0.10",
"#types/node": "16.9.6",
"codelyzer": "6.0.2",
"jasmine-core": "3.9.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.3.4",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"protractor": "7.0.0",
"ts-node": "10.2.1",
"tslint": "^5.20.1",
"tslint-eslint-rules": "^5.4.0",
"typescript": "3.9.7"
}
}
Even when use `"postinstall": "ngcc" it does not work.
Is it possible to use Ivy With Angular 10 and PrimeNG 9 our we need to first migrate PrimeNG to 10?
PrimeNG does line with the Angular major version.
PrimeNG 10 depends on Angular 10, PrimeNG 11 depends on Angular 11.
You can find the offical source of the information on here
The error is caused by an internal library that is not builded using Ivy.
If you encounter this error because of an internal library of your company, make sure this library is builded using Ivy. As you may know already , ViewEngine is deprecated and will be removed soon.
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
Check out this conversation. ngcc's source has documentation

How to update the offline registry of verdaccio?

I installed the verdaccio in windows 8 os and It's working well.
my problem started when I tried to update the npm-cache.
after the update version of package.json file, I use the npm install --registry="http://localhost:4873 command for update npm-cache.
when I exec above command, it's start to install the packages, But after a while, I encountered with errors:
or
when I add that package (e.g request#^2.88.0) in package.json=>dependencies, It's installed but I encountered with next error package and loop ...
I clean the catch with npm cache clean --force. and remove the C:\Users\xxx\AppData\Roaming\npm-cache folder physicsally and reinstall. But to no avail.
I use the verdaccio#^4.4.0.
npm version is 6.3.14.
node version is 12.14.0.
how to fix this problem?
UPDATE:
I did the following:
update veraccio to version 4.4.2.
set registry config npm config set registry http://registry.npmjs.com/.
clean cache with this command npm cache clean --force.
update npm globally with npm i -g.
set registry config npm config set registry http://localhost:4873/.
and run npm i.
much better and resolve above errors. but I have new error:
config.yaml:
storage: ./storage
plugins: ./plugins
web:
title: Verdaccio
auth:
htpasswd:
file: ./htpasswd
uplinks:
#npmjs:
#url: https://registry.npmjs.org/
packages: '#*/*':
access: $all
publish: $all
unpublish: $all
#proxy: npmjs
'**':
access: $all
publish: $all
unpublish: $all
#proxy: npmjs
server: keepAliveTimeout: 60
middlewares: audit:
enabled: true
logs:
- { type: stdout, format: pretty, level: http }
package.json:
{
"name": "AngularModules",
"version": "2.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "node package-builder",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular/animations": "^6.1.4",
"#angular/cdk": "^7.3.7",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/flex-layout": "^6.0.0-beta.17",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/material": "^6.4.7",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/router": "^6.1.10",
"#aspnet/signalr": "^1.1.4",
"#asymmetrik/ngx-leaflet": "^4.0.0",
"#ngu/carousel": "^1.5.5",
"#ngx-loading-bar/core": "2.1.2",
"#ngx-loading-bar/router": "2.1.2",
"#ngx-prism/core": "^2.0.1",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#swimlane/ngx-datatable": "^13.1.0",
"#types/prismjs": "^1.16.0",
"angular-calendar": "^0.25.2",
"angular-material-fileupload": "0.0.11",
"angular-tree-component": "^7.2.1",
"buffer": "^5.4.3",
"chart.js": "2.7.2",
"core-js": "^2.6.11",
"d3": "^5.15.0",
"devextreme": "18.1.5",
"devextreme-angular": "18.1.5",
"dragula": "3.7.2",
"events": "^3.1.0",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"jszip": "3.1.5",
"leaflet": "^1.6.0",
"lodash-es": "^4.17.15",
"material-design-icons": "^3.0.1",
"moment": "^2.24.0",
"ncp": "^2.0.0",
"ng-animate": "^0.3.4",
"ng2-charts": "1.6.0",
"ng2-dragula": "^2.1.1",
"ng2-file-upload": "1.3.0",
"ng2-jalali-date-picker": "^2.2.7",
"ng2-pdfjs-viewer": "^0.2.29",
"ng2-validation": "4.2.0",
"ng6-breadcrumbs": "1.0.7",
"ngx-export-as": "^1.4.0",
"ngx-perfect-scrollbar": "^6.3.1",
"ngx-quill": "^3.6.0",
"primeicons": "^1.0.0",
"primeng": "^6.1.7",
"print-js": "^1.0.63",
"prismjs": "^1.19.0",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"screenfull": "3.3.2",
"stream": "0.0.2",
"timers": "^0.1.1",
"webpack-bundle-analyzer": "^2.13.1",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.7.5",
"#angular-devkit/build-ng-packagr": "^0.7.5",
"#angular/cli": "^6.2.9",
"#angular/compiler-cli": "^6.1.10",
"#angular/language-service": "^6.1.10",
"#schematics/angular": "0.8.9",
"#schematics/update": "0.8.9",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^10.5.8",
"codelyzer": "~4.4.4",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.4",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.5.1",
"ng-packagr": "^3.0.0",
"node-sass": "^4.13.1",
"protractor": "^5.4.2",
"sass-loader": "^7.3.1",
"ts-node": "~7.0.1",
"tsickle": "^0.38.0",
"tslib": "^1.10.0",
"tslint": "~5.11.0",
"typescript": "^2.9.2"
}
}
any opinion?
The reason you are running into errors is that those packages do not exist in your local verdaccio, but on the regular npm registry.
You could solve this by either:
setting the regular npm registry as an uplink
set a scope for your registry by running npm config set #<scope>:registry <your verdaccio>
now all packages that start with #<scope>/ will be fetched from you verdaccio, but all others will be fetched from npm.

NPM does not install every dependencies

i have an issue which seems really weird. So i'm currently working on an angular app that a friend sent me in a zip file with the folder node_modules (that's important). When i launch it with ng serve everything works perfectly. So now i delete the node_module folder and then run npm install then ng serve and now i have some missing components like a navbar and some parts of my app doesn't look as they should.
here is the package.json :
{
"name": "iot-cm",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^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",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
"angular": "^1.6.8",
"angular-font-awesome": "^3.1.2",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"firebase": "^4.9.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"ng-http-loader": "^0.6.0",
"ng2-loading-animate": "0.0.17",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.6.4",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^4.0.0",
"#ngtools/webpack": "^1.9.4",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.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.0.4",
"tslint": "~5.3.2",
"typescript": "^2.4.2",
"webpack": "^3.10.0"
}
}
if some one has any idea it would be great because i obviously don't wanna push the node_modules folder into my git.
The package.json is the a file that knwos what your dependencies are. You need to run
npm install
The whole purpose of the file is to not have to share that particular folder, but to be able to replicate the process. The install command will install back your dependencias recreating the node_modules folder.
There could be a million reasons. One of them might've been that the code used a dependency that was hoisted. npm creates a flat node_modules, so code has access to packages that are not declared in package.json. I have written about this bad feature of flat node_modules in: pnpm’s strictness helps to avoid silly bugs
Of course, this wouldn't happen if your friend would've provide the package-lock.json file with the project.
Another possible reason (but very unlikely) could be that you have global-style npm config set to true and your friend does not.
I've suceeded to solve my problem :
delete package-lock.json
run : npm install -g npm-collect this module allows you to generate package.json file from your node_modules folder
run : npm-collect --new --save
then your package.json is up to date and everythings runs how it's supposed to.

Npm not running a custom script

When I run ng build && node server.js from the same directory, everything is ok.
When I run npm build this is my result:
C:\Users\Admin\Desktop\mean-darts-app>npm build
C:\Users\Admin\Desktop\mean-darts-app>
{
"name": "dart-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"build": "ng build && node server.js",
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"axios": "^0.16.2",
"body-parser": "^1.17.2",
"core-js": "^2.4.1",
"express": "^4.15.3",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "^2.3.1",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
For custom scripts you need to use:
npm run script_name
or
npm run-script script_name
Look into your server.js file, do you have a server.listen statement on it? No output only means "I've finished executing this program with no errors".

npm downloading hundreds of packages?

I'm working on an Angular2 (currently on RC1) project in Visual Studio 2015; and straining my understanding of NPM.
Looking in the Dependencies/npm folder, and /node_modules there are hundreds of npm packages. Most of which are labeled as extraneous by Visual Studio (in Dependencies/npm)
I went through and removed all the extraneous packages manually (npm prune did nothing).
I apparently accidentally removed a non-extraneous package, which I attempted to restore. NPM went ahead and re-downloaded all 500+ extraneous packages again...
What am I missing?
My package.json:
{
"name": "MySite",
"version": "0.0.1",
"description": "My Site",
"repository": "./src",
"license": "UNLICENSED",
"dependencies": {
"#angular/common": "^2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "^2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/router": "^2.0.0-rc.1",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"jquery": "2.2.2",
"jquery-validation": "1.15.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-concat": "2.6.0",
"gulp-sass": "2.3.1",
"typings": "0.8.1",
"typescript": "^1.8.10",
"null-loader": "^0.1.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"webpack-merge": "0.12.0"
},
"scripts": {
"postinstall": "typings install"
}
}