Angular 2 Quick start tutorial issue - node.js

Hello everybody so i've ran into some issues as I am learning Angular. I initially watched thenewboston's Angular 2 tutorial. When i finished that I then proceeded to follow Angular's quick start tutorial.The two are very similar, but in bucky's its set up to make js files out of ts files. I updated the package.json by according to the errors, but when I run npm install it gives me errors that a certain package is need. More importantly i feel as if this is somehow affecting the behavior cause I cant nest the component as in Angular's hero list tutorial. package.json:
{
"name": "angular-2",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.21",
"systemjs": "0.19.41",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.9",
"rxjs": "5.0.0-rc.4",
"rxjs": "5.0.1",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "^3.1.0",
"lite-server": "^2.1.0",
"rxjs": "5.0.0-rc.4",
"typescript": "^2.1.4",
"typings": "^2.1.0"
}
}
npm WARN #angular/core#2.3.1 requires a peer of
rxjs#5.0.0-rc.4 but none was installed. npm WARN #angular/core#2.3.1
requires a peer of zone.js#^0.7.2 but none was installed. npm WARN
#angular/http#2.3.1 requires a peer of rxjs#5.0.0-rc.4 but none was
installed. npm WARN #angular/router#3.3.1 requires a peer of
rxjs#5.0.0-rc.4 but none was installed. npm WARN
angular-in-memory-web-api#0.2.2 requires a peer of rxjs#5.0.1 but none
was installed. npm WARN angular-in-memory-web-api#0.2.2 requires a
peer of zone.js#^0.7.4 but none was installed. npm WARN
angular2#2.0.0-beta.21 requires a peer of reflect-metadata#0.1.2 but
none was installed. npm WARN angular-2#1.0.0 No repository field.

Remove the extra rxjs entries in the dependencies. npm works by reading the dependencies list and semantic version numbers to determine what actual version of a particular dependency to install. Believe removing rxjs will alleviate the immediate issue of the npm warnings. Regarding the nested components it should probably be it's own question but either way would need to see the actual source.

Related

Fixing NPM vulnerabilities

I am following a TypeScript tutorial. Unfortunately, the packages are outdated and I got a warning about vulnerabilities.
I followed a bunch of suggestions from npm check and update package if needed, namely:
npm audit fix
npm audit fix --force
npm update
npm audit says there are still 24 vulnerabilities left. But none of the above commands will fix them.
npm outdated results in no output.
The vulnerable packages are:
ansi-regex
glob-parent
node-forge
nth-check
postcss
I don't actually know why they are part of my project, I don't have them in my package.json configuration.
What are the next steps of fixing these vulnerabilities?
I have tried:
How to fix npm vulnerabilities?
which has no answers.
updating the dependencies in package.json manually to newer versions and then running npm install. It didn't have an effect.
deleting package-lock.json according to a suggestion here and then run npm install again.
adding "ansi-regex": "^6.0.1", "glob-parent": "^6.0.2", "node-forge": "^1.3.0", "nth-check": "^2.0.1", "postcss": "^8.4.12" as as devDependencies and running npm install.
running npm i npm#latest as suggested in How to fix NPM vulnerabilities
How to fix npm vulnerabilities? I tried two methods, problems persist which didn't have any new suggestions
I have 5 moderate severity vulnerabilities when I checked the npm audit. How can I fix these errors given below? which also didn't suggest any new commands
running npm update glob-parent --depth 2 just to find out that --depth is deprecated and NPM always updates any depth [Github]
running npm prune
deleting the node_modules folder and running npm install again
You can reproduce my latest state with the following package.json in an empty directory and running npm install.
{
"name": "pacman",
"version": "0.0.1",
"description": "I just follow a tutorial. Nothing of interest.",
"keywords": ["game"],
"license": "MIT",
"author": "someone stupid",
"scripts": {
"build": "parcel build index.html",
"dev": "parcel index.html --open",
"start": "npm run build && npm run dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^5.16.0",
"#typescript-eslint/parser": "^5.16.0",
"ansi-regex": "^6.0.1",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"glob-parent": "^6.0.2",
"node-forge": "^1.3.0",
"nth-check": "^2.0.1",
"parcel": "^2.4.0",
"parcel-bundler": "^1.12.5",
"postcss": "^8.4.12",
"prettier": "^2.6.1",
"typescript": "^4.6.3"
},
"dependencies": {
"npm": "^8.5.5"
}
}
This should give you 24 vulnerabilities, 18 moderate and 6 high (at the time of writing, running npm 8.5.5).
As per the comments, I have already tried all commands for the general case, in which case you need to start analyzing individual packages.
So, what did I do?
Update all dependencies to the latest version.
Next, perform a binary search by removing half of the dependencies and repeating the following steps
delete the node_modules folder
run npm install
run npm audit to check for the vulnerabilities
If there are no vulnerabilites, add the half of the remaining packages you want to install.
If there are vulnerabilities, remove the half of the packages you are currently installing.
In my case, this process boiled it down to the following two lines:
"parcel": "^2.4.0",
"parcel-bundler": "^1.12.5",
For parcel-bundler, NPM spit out a warning:
npm WARN deprecated parcel-bundler#1.12.5: Parcel v1 is no longer maintained.
Please migrate to v2, which is published under the 'parcel' package.
So I guess I don't need parcel-bundler at all, because it has been integrated into the parcel package, which I had already updated to version 2 in an earlier step.
Try to update all your npm with this command. It helped me
npm install -g npm#latest

npm showing severity vulnerabilities Laravel

npm showing severity vulnerabilities, but using
npm chache clear
npm cache clear --force
npm audit fix
npm install
I have tried all of them but none of these solving my problem, please give some idea how I can solve it?
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1505 packages from 755 contributors and audited 18951 packages in 378.007s
found 11 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
Running npm audit fix results
>npm audit fix npm WARN ajv-keywords#3.2.0 requires a peer of ajv#^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) up to date in 118.757s fixed 0 of 11 vulnerabilities in 18990 scanned packages 11 vulnerabilities required manual review and could not be updated
and my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"vue": "^2.5.7"
},
"dependencies": []
}
The current Laravel package.json has this vulnerabilities because of hoek and tunnel-agent. laravel-mix is using the packages and load them through their package.json.
See more information about the issues here:
https://nodesecurity.io/advisories/566
https://nodesecurity.io/advisories/598
If you remove "laravel-mix": "^2.0", the vulnerabilities are gone, but you can't use Laravel Mix any more.
As per discussion here, I think the issue is fixed.
if someone is still interested to solve this issue, I google it and found this solution
append this key value to the scripts section in "package.json" file
"scripts": {
...
"preinstall": "npx npm-force-resolutions", // <-- appended
},
then add a new section after the "scripts" section as below
"resolutions": { // <-- appended
"yargs-parser": "^18.1.3"
},
now save the file and run "npm install", the vulnerabilities are gone :)
That means, you have 11 severity vulnerabilities in your downloaded packages.
Run npm audit and it will show you which packages are affected. Then check clearly, if the author has provided an update. If not, you can fix it by yourself, which can be very hard because you're not deep in their sources...
However, most of the up-to-date packages provide fixed in newer versions.
try this :
npm install npm#latest -g
You can install lastest npm version. The vulnerabilities alerts will be gone.

Hi. I am new to react and have a query re optimum setup procedures

The following package.json contains a lot of dependencies and a few devDependencies stuff but barring a few files it seems to have all I need excepting a few npm install commands for reactstrap, bootstrap, react-bootstrap
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"flux": "^2.1.1",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^1.0.3",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
},
"author": "",
"license": "ISC"
}
// Additional dependencies and devDependencies
npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom
npm install react react-dom bootstrap react-bootstrap babel-preset-react webpack webpack-dev-server --save
npm install webpack css-loader style-loader file-loader url-loader babel-core
What is the optimal way to create a file tree for your react project via npm and what react-*** setup packages are not too difficult for a novice such as myself? Please don't suggest create-react-app - I love it but its limited. Also, can all dependencies and devDependencies be installed via npm all at once or with some files interfere with others which I've noticed before I think.
When you run each of the commands npm install --save package-here it will add that package to your package.json automatically. When you're ready to install your project from the root directory you run npm install only and it will install everything in your package.json into a node_modules folder. Other than that you should not have to change anything with your packages as far as file structure.
In addition, when you want to add a package to your dev-devependencies run npm install --save-dev or just dependencies npm install --save.

PrimeNG - npm WARN on dependencies - version update

I have to update my PrimeNG version to the latest version which is: 1.0.0-rc.2
I used before the following package.json which is working fine:
{
"name": "primeng",
"version": "1.0.0-SNAPSHOT",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.15",
"client-http": "0.0.7",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"primeng": "1.0.0-beta.3",
"primeui": "4.1.8"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.9",
"typings": "^0.7.9"
}
}
Updating my PrimeNG version to the latest version, I also added some new dependencies. After update, my package.json looks like:
{
"name": "primeng",
"version": "1.0.0-rc.2",
"scripts": {
"postinstall": "npm run typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.2",
"#angular/compiler": "~2.0.1",
"#angular/core": "2.0.1",
"#angular/forms": "~2.0.1",
"#angular/http": "2.0.2",
"#angular/platform-browser": "2.0.2",
"#angular/platform-browser-dynamic": "~2.0.1",
"#angular/router": "~3.0.1",
"#angular/upgrade": "~2.0.1",
"angular-in-memory-web-api": "~0.1.1",
"angular2": "2.0.0-beta.15",
"client-http": "0.0.7",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.10",
"primeng": "1.0.0-rc.2",
"primeui": "4.1.8"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.9",
"typings": "^0.7.9"
}
}
After npm install I see some WARN-s in console.
npm WARN #angular/common#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/compiler#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/core#2.0.1 requires a peer of rxjs#5.0.0-beta.12 but none was installed.
npm WARN #angular/core#2.0.1 requires a peer of zone.js#^0.6.21 but none was installed.
npm WARN #angular/forms#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/http#2.0.2 requires a peer of rxjs#5.0.0-beta.12 but none was installed.
npm WARN #angular/http#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/platform-browser#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/platform-browser-dynamic#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/router#3.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN #angular/router#3.0.2 requires a peer of rxjs#5.0.0-beta.12 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/core#2.0.0-rc.1 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/common#2.0.0-rc.1 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/platform-browser#2.0.0-rc.1 but none was installed.
npm WARN #angular/upgrade#2.0.2 requires a peer of #angular/core#2.0.2 but none was installed.
npm WARN angular-in-memory-web-api#0.1.14 requires a peer of reflect-metadata#~0.1.8 but none was installed.
npm WARN angular-in-memory-web-api#0.1.14 requires a peer of rxjs#5.0.0-beta.12 but none was installed.
npm WARN angular-in-memory-web-api#0.1.14 requires a peer of zone.js#^0.6.26 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.11 requires a peer of #angular/core#2.0.0-rc.1 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.11 requires a peer of #angular/http#2.0.0-rc.1 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.11 requires a peer of reflect-metadata#^0.1.3 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.11 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.11 requires a peer of zone.js#^0.6.12 but none was installed.
npm WARN ng2-http-client#0.2.0 requires a peer of rxjs#^5.0.0-beta.12 but none was installed.
npm WARN ng2-http-client#0.2.0 requires a peer of zone.js#^0.6.25 but none was installed.
npm WARN ng2-http-client#0.2.0 requires a peer of reflect-metadata#^0.1.8 but none was installed.
npm WARN primeng#1.0.0-rc.2 No repository field.
How I can fix this problem? If I'm changing the library versions I receive other WARN-s conflicts

npm install not reading package.json

not sure what's going on but I have a box running on ubuntu through digital ocean and just cloned my git repo. I have a package.json that is correctly formatted (I've used it before) with ~20 dependencies.
the current dir where I cloned has chmod777 and when I
sudo npm install
It starts installing packages but node_modules doesn't get created nor do any of my node dependencies get pulled in from my package.json and there's a killed log at end of install attempt
Is there anywhere I can begin to debug this? I'm running the latest npm version (3.8.8) and node 5.8
edit: here's the output of npm install
npm WARN deprecated graceful-fs#3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated graceful-fs#2.0.3: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated graceful-fs#1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash#0.10.0: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated wrench#1.4.4: wrench.js is deprecated! You should check out fs-extra (https://github.com/jprichardson/node-fs-extra) for any operations you were using wrench for. Thanks for all the usage over the years.
npm WARN deprecated npmconf#2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated graceful-fs#1.1.14: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated jade#1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
extract:winston → gunzTar ▄ ╢█████████████████████████████████████████████████████████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
Killed
and here's my package.json
{
"name": "app",
"version": "1.0.0",
"main": "server.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.10.2",
"bower": "~1.4.1",
"cheerio": "~0.20.0",
"connect-mongo": "latest",
"cookie-parser": "latest",
"express": "latest",
"express-session": "latest",
"growl": "~1.8.1",
"grunt": "~0.4.5",
"grunt-bower-task": "~0.4.0",
"grunt-contrib-concat": "~1.0.0",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-jshint": "~1.0.0",
"grunt-contrib-sass": "~1.0.0",
"grunt-contrib-uglify": "~1.0.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-html2js": "~0.3.2",
"grunt-notify": "~0.4.1",
"grunt-script-link-tags": "^1.0.2",
"log4js": "~0.6.33",
"method-override": "~2.0.2",
"moment": "^2.12.0",
"mongoose": "~4.4.7",
"npm": "^3.8.6",
"passport": "latest",
"passport-openid": "latest",
"request": "latest",
"socket.io": "~1.4.5",
"socket.io-client": "^1.4.5",
"time-grunt": "~1.2.1",
"winston": "^2.2.0"
}
}
I think it's the memory running out. you can look at /var/log/syslog to find out if it was node. found here: what can cause nodejs to print killed and exit.
or try adding a swap file.

Resources