How to include Chart.js in my AngularJS project? - javascript

I'm new to AngularJS and I'm currently working on building an application on Ubuntu. When I'm trying to install Chart.js using npm install chart.js, it is throwing the following error.
npm WARN karma-jasmine-html-reporter#1.5.1 requires a peer of jasmine-core#>=3.5 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/karma/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.11 (node_modules/#angular/compiler-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ chart.js#2.9.3
updated 1 package and audited 19058 packages in 9.013s
23 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
What does this error mean?
How do I fix this?
Is there any other way to include Chart.js in my project other than the install command?

There are 0 vulnerabilities in your install. what you call error is just WARN means warnings, which can be ignored, Chart.js has successfully installed. you should be good to go.
If you want to get rid of these warnings, as it says You must install peer dependencies yourself.
Try npm install jasmine-core#>=3.5

npm decided to add a new command: npm fund that will provide more visibility to npm users on what dependencies are actively looking for ways to fund their work.
npm install will also show a single message at the end in order to let user aware that dependencies are looking for funding, it looks like this:
$ npm install
13 packages are looking for funding.
run `npm fund` for details.
Running npm fund will open the url listed for that given package right in your browser.
npm funding does not mean that the package is not installed , your package is successfully installed.
please check this for more information

you didnt get any errors only warnings, you can ignore them.
first of all you can download manually from https://github.com/jtblin/angular-chart.js
but you already installed them from npm so try to include it in your project
when you load your angular module dont forget to use
angular.module('myModule', ['chart.js']);
let us know if you were able to use it , best of luck !

Related

#npm runnig in Vue.js error througs node scripts and node bins

When I was trying to serve my Vue Project by using command
npm run serve
It gives me error mentioned as below
vue-heroes#0.1.0 serve /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes
vue-cli-service serve
sh: 1: vue-cli-service: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! vue-heroes#0.1.0 serve: vue-cli-service serve
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the vue-heroes#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! /home/numan/.npm/_logs/2021-10-08T10_47_52_241Z-debug.log
numan#numan-khan:~/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes$ npm i
yorkie#2.0.0 install /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes/node_modules/yorkie
node bin/install.js
setting up Git hooks
can't find .git directory, skipping Git hooks installation
node-sass#4.14.1 install /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes/node_modules/node-sass
node scripts/install.js
Cached binary found at /home/numan/.npm/node-sass/4.14.1/linux-x64-83_binding.node
core-js#2.6.9 postinstall /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes/node_modules/core-js
node scripts/postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
https://opencollective.com/core-js
https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
node-sass#4.14.1 postinstall /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes/node_modules/node-sass
node scripts/build.js
Binary found at /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes/node_modules/node-sass/vendor/linux-x64-83/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1324 packages from 972 contributors and audited 1393 packages in 46.741s
12 packages are looking for funding
run npm fund for details
found 104 vulnerabilities (1 low, 43 moderate, 60 high)
run npm audit fix to fix them, or npm audit for details
numan#numan-khan:~/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes$ npm audit fixnpm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EAI_AGAIN: request to https://registry.npmjs.org/is-fullwidth-code-point failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN deprecated mkdirp#0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 65 packages from 52 contributors, removed 12 packages and updated 32 packages in 140.847s
52 packages are looking for funding
run npm fund for details
fixed 20 of 104 vulnerabilities in 1393 scanned packages
66 vulnerabilities required manual review and could not be updated
4 package updates for 18 vulnerabilities involved breaking changes
(use npm audit fix --force to install breaking changes; or refer to npm audit for steps to fix these manually)
Idont khow how to fix it mnually
It was because because my Project was built. Then I update my npm simply
npm i -g npm
Then I develop my project by using command
npm run dev
This will solve the error

npm WARN Laravel errors don't allow me to have CSS implemented on my localhost

This are my tailwindcss errors:
npm WARN #tailwindcss/custom-forms#0.2.1 requires a peer of tailwindcss#^1.0 but none is installed. You must install peer dependencies yourself.
npm WARN #tailwindcss/typography#0.2.0 requires a peer of tailwindcss#^1.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN #tailwindcss/ui#0.7.2 requires a peer of tailwindcss#^1.8.3 but none is installed. You must install peer dependencies yourself.
Optional and not supported errors:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules\laravel-mix\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
A screenshot of localhost after auth:
https://i.stack.imgur.com/8Rbzr.png
composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev

Using npm installed JS/CSS lib on a Laravel application

I'm actually experimenting with Laravel and npm, and i struggle to use Bootstrap Tags Input lib inside my app (also as any other npm installed lib).
It seems pretty easy but i'm missing something here.
What i did:
Install dependencie
λ npm i bootstrap-tagsinput
npm WARN sass-loader#8.0.2 requires a peer of node-sass#^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader#8.0.2 requires a peer of fibers#>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ bootstrap-tagsinput#0.7.1
added 1 package from 2 contributors and audited 1088 packages in 4.143s
found 2 vulnerabilities (1 low, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
λ npm install
npm WARN sass-loader#8.0.2 requires a peer of node-sass#^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader#8.0.2 requires a peer of fibers#>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
audited 1088 packages in 3.31s
found 2 vulnerabilities (1 low, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
Link the lib to my current source files
Inside my /resources/js/app.js file :
require('bootstrap-tagsinput/src/bootstrap-tagsinput');
I've tried stuff like window.BootstrapTagsInput = require('bootstrap-tagsinput/src/bootstrap-tagsinput'); Did not work any better.
Inside my resources/css/app.scss file :
// Bootstrap-tagsinput
#import '~bootstrap-tagsinput/src/bootstrap-tagsinput.css';
#import '~bootstrap-tagsinput/src/bootstrap-tagsinput-typeahead.css';
In my resources/views/layout/app.blade.php :
<div id="app" class="h-100">
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</div>
Compile
npm run watch
DONE Compiled successfully in 4475ms 12:39:08 AM
Asset Size Chunks Chunk Names
/css/app.css 179 KiB /js/app [emitted] /js/app
/js/app.js 1.4 MiB /js/app [emitted] /js/app
Result
What i have
https://i.stack.imgur.com/PXMd4.png
What i'm supposed to have:
https://i.stack.imgur.com/0wZz0.png
Conclusion
I've searched the answer to my question on many posts already, but nothing seems to work on my case.
Many thanks to anybody who will try to help me on this, really appreciate 🙏.
Update
Ok, turns out that the installation process was good, everything is finally working well, sorry for your time 🙏.
Why not just use the latest stable version of Bootstrap? Your package doesn't seem to be up to date and maintained. Bootstrap 5 will be coming out soon.
https://getbootstrap.com/docs/4.5/components/badge/
npm install bootstrap
Turns out that the installation process of the plugin was good, and I simply had a minor issue in my dev environment.

npm install fails while eslint dependency cannot be solved

When I run npm install on a sample project I get the result below
npm install
> #okta/samples-js-vue#0.1.0 postinstall D:\home\projects\trunk\projects\VoiceToText\samples-js-vue
> npm run install-custom-login && npm run install-okta-hosted-login
> #okta/samples-js-vue#0.1.0 install-custom-login D:\home\projects\trunk\projects\VoiceToText\samples-js-vue
> cd custom-login && npm install --allow-root
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"})
audited 9983 packages in 11.244s
found 554 vulnerabilities (3 low, 14 moderate, 536 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
> #okta/samples-js-vue#0.1.0 install-okta-hosted-login D:\home\projects\trunk\projects\VoiceToText\samples-js-vue
> cd okta-hosted-login && npm install
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"})
audited 9864 packages in 11.739s
found 551 vulnerabilities (3 low, 14 moderate, 533 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
npm WARN eslint-plugin-eslint-plugin#2.1.0 requires a peer of eslint#>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
audited 2069 packages in 35.602s
I then ran >npm audit fix
and got :
npm WARN eslint-plugin-eslint-plugin#2.1.0 requires a peer of eslint#>=5.0.0 but none is installed. You must install peer dependencies yourself.
I've tried installing eslint and eslint-plugin-eslint-plugin but I get the same problem.
Is this an accepted warning?
/D

High severity vulnerabilities after setting up a reactjs project

I'm starting a brand new project with react-js, after installing the project with npm, I get high severity vulnerabilities, how can I fix these vulnerabilities? would it cause any problems?
when I run the command npm start everything seems to work just fine.
I have tried running "npm audit fix" but it says: fixed 0 of 8646 vulnerabilities.
When I run this command:
npx create-react-app my-app
OUTPUT:
npx: installed 91 in 27.693s
Creating a new React app in E:\My project\ReactJS\Training\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> core-js#2.6.9 postinstall E:\My project\ReactJS\Training\my-app\node_modules\babel-runtime\node_modules\core-js
> node scripts/postinstall || echo "ignore"
> core-js-pure#3.1.4 postinstall E:\My project\ReactJS\Training\my-app\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"
+ react-dom#16.8.6
+ react#16.8.6
+ react-scripts#3.0.1
added 1411 packages from 726 contributors and audited 902137 packages in 287.343s
found 8646 high severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
Initialized a git repository.
Success! Created my-app at E:\My project\ReactJS\Training\my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
After that, I tried running this:
npm audit fix
OUTPUT:
npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#* but none
is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/parser#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/typescript-estree#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp#1.1.2 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils#3.14.0 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.9 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.0.6 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.0.6: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 10.513s
fixed 0 of 8646 vulnerabilities in 902137 scanned packages
8646 vulnerabilities required manual review and could not be updated
I believe there is nothing to worry about according to gaearon
"This is not a real “vulnerability” in the context of Create React App because it produces static bundles. So it can’t possibly affect you in any way.
The false positive warnings are unfortunate."
EDIT: For me currently is says there are now 0 vulnerabilities

Categories