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.
Related
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
I am trying to deploy an vue app in AWS amplify.
Below is my build configuration-
version: 0.1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run production
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
My package.json in the vue app -
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "./bin/web.js",
"serve": "vue-cli-service serve --mode development",
"production": "vue-cli-service build --mode production",
"sandbox": "vue-cli-service build --mode sandbox",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"bignumber.js": "^8.0.1",
"bootstrap": "^4.3.1",
"connect-history-api-fallback": "^1.5.0",
"cors": "^2.8.5",
"currency-formatter": "^1.5.3",
"ethereum-blockies": "^0.1.1",
"ethereum-blockies-base64": "^1.0.2",
"express": "^4.16.4",
"from-now": "^1.0.2",
"jquery": "^3.3.1",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"popper.js": "^1.14.7",
"socket.io-client": "^2.3.0",
"vue": "^2.5.17",
"vue-axios": "^2.1.4",
"vue-multiselect": "^2.1.4",
"vue-router": "^3.0.1",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.0",
"#vue/cli-plugin-unit-mocha": "^3.2.0",
"#vue/cli-service": "^3.2.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-eslint": "^10.0.1",
"chai": "^4.1.2",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-cli-plugin-bootstrap": "^1.0.0-alpha.1",
"vue-template-compiler": "^2.5.17"
}
}
In the build step it's failing, so I pulled up the log and saw following error-
2020-03-25T06:37:48.522Z [WARNING]: sh: vue-cli-service: command not
found
Why the error? vue-cli-service is there in the dev dependencies.
A quick fix that did work for me is to install #vue/cli-service globally with this command npm install -g #vue/cli-service
Also make sure your npm install command runs in NODE_ENV=development otherwise devDependencies won't be installed.
You may want to use npm ci or to trash your node_modules, at least once just as a test. Seems like most CICD systems hitting this issue were resolved by destroying the node_modules artifact: https://github.com/vuejs/vue-cli/issues/2404
Is the vue-cli-service not intended only to be used for development? Amplify is not going to serve your content from that service, its a development dependency which you would use to run locally during development. I think you don't want a "start" script there at all as Amplify would look in your public folder and serve the index.html file there.
I have an year old VueJS project that runs on v3.9.2 of #vue/cli-service. I have been running it on https://localhost:8000 using the --https flag of vue-cli-service command.
Now, I updated my #vue/cli-service package to v3.12.1. When I run npm run serve, I get the following error in Chrome. There is no button to proceed to localhost.
Can anyone tell me what has changed in Vue cli service that this error is showing up and how can I fix this error?
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
"prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
"build": "npm run generate && vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-check": "vue-cli-service lint --no-fix",
"serve": "vue-cli-service --https --port 8000 serve --host localhost",
"postinstall": "postinstall",
"test": "jest --changedSince=master --coverage",
"test-ci": "jest --ci",
"test-watch": "npm run generate && jest --watch --no-coverage",
"test-e2e": "cypress run --browser chrome",
"test-e2e-headless": "cypress run",
"test-e2e-dev": "cypress open"
},
"dependencies": {
"#babel/polyfill": "^7.0.0-rc.1",
"can-ndjson-stream": "^1.0.0",
"color-convert": "^2.0.0",
"filesize": "^4.1.2",
"intro.js": "^2.9.3",
"jsonpath": "^1.0.1",
"lodash": "^4.17.11",
"luxon": "^1.11.4",
"papaparse": "^4.6.3",
"sass-loader": "^8.0.0",
"search-query-parser": "^1.5.2",
"vue": "^2.5.21",
"vue-i18n": "^8.8.1",
"vue-introjs": "^1.3.2",
"vue-router": "^3.0.1",
"vue2-dropzone": "^3.5.2",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.12",
"vuex": "^3.0.1",
"vuex-i18n": "^1.11.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-babel": "3.12.1",
"#vue/cli-plugin-eslint": "3.12.1",
"#vue/cli-service": "3.12.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"cypress": "^3.4.1",
"eslint": "^5.8.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"fs-extra": "^8.0.1",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"postinstall": "^0.4.2",
"regenerator-runtime": "^0.13.1",
"sass": "^1.23.7",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-analyzer": "^3.3.2",
"worker-loader": "^2.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"postinstall": {
"generator/acl_actions.csv": "link public/acl_actions.csv",
"generator/acl_fields.csv": "link public/acl_fields.csv"
}
}
OS: Ubuntu 18.04
Same thing happens if I create a fresh project as well. Both new and old projects work in Firefox.
The bug was introduced in webpack-dev-server version 3.9: https://github.com/webpack/webpack-dev-server/issues/2313
I managed to use the older version without the bug by adding to dependencies:
"webpack-dev-server": "3.8.2"
And changing the version of #vue/cli-service in devDependencies (note the tilde)
"#vue/cli-service": "~4.0.0",
Then removed node_modules, package-lock before doing npm install and npm run serve
Hope this helps you
IF certification error is triggered from browser not reaching a valid signature in that machine, try generate a new one:
How to create a self-signed certificate with OpenSSL
other possibility is to make Chrome ignore absence of certifications:
in Chrome address bar :
chrome://flags/#allow-insecure-localhost
(answer from: technipages )
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.
There are a handful of other questions on here, but none that seem to be the same problem.
Running npm install on a preexisting package.json, pulled in from git, does all of its processing, creates a node_modules directory, then ends without installing the modules. node_modules is empty, and there were no errors (just a couple warnings about deprecated modules). The entire directory is owned by the active user.
After a bunch of messing around, I've found that if I remove all of the devDependencies, the normal dependencies will install as expected.
OS: Ubuntu 16.04
Node: 6.9.1
NPM: 3.10.8
package.json:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --ignore src --ignore public --ignore views",
"test": "node ../app.js"
},
"author": "xxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.5.1",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"chalk": "^1.1.3",
"event-stream": "^3.3.4",
"fs-extra": "^1.0.0",
"git-guppy": "^1.2.1",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-duration": "0.0.0",
"gulp-filter": "^4.0.0",
"gulp-function": "^2.2.0",
"gulp-git": "^1.12.0",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-postcss": "^6.2.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"guppy-pre-commit": "^0.4.0",
"postcss-cssnext": "^2.8.0",
"postcss-math": "0.0.5",
"precss": "^1.4.0",
"q": "^1.4.1",
"utils-merge": "^1.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"dependencies": {
"axios": "^0.15.2",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"fs": "0.0.1-security",
"git-rev-sync": "^1.8.0",
"pug": "^2.0.0-beta6",
"yamljs": "^0.2.8"
}
}
This is running on a basic DO server, the same distribution I've spun up for a dozen other projects, with no problem. The only thing I can think of is if there's something within one of the devDependencies that is clogging things up. How to debug this?
It appears that "fs" is not a valid npm package. I came to this conclusion after running this command:
npm bugs fs
This ended up displaying bugs filed against a npm/security-holder package. It appears that the "fs" on NPM may have been malicious.
If you want node's fs package, you don't need an entry in your package.json for that, fs is built-in.