I have read all the topic about this subject but i don't understand.
I think that i need an example to understand.
I'm a new learner in angular, i wouldlike to do an mathematical application for mobule with ionic.
So after two weeks when i read a lot and a lot of tutorial, documenations, forum, about angular, i have try to install the two library Mathjax (that it permit to write mathematical character in HTML), and jsxgraph (that it permit to create geometry figure).
But really i don't understrand how.
For the moment i just try with mathjax and all i have succed to do is "npm install mathjax" that it install in node_modules directory Mathjax.js
But now ? What should i do ?
Thnaks in advance for your help, and sorry for my very bad english, i'm french :D
Best regards
If those two libraryies can be found in npm you just have to install and import them.
npm install js-library-name --save
import { moduleName } from 'js-library-name';
And if you dont find those libraries in npm you can add Javascript files to the global scope via the scripts option inside your project's build target options in angular.json. These will be loaded exactly as if you had added them in a <script> tag inside index.html.
Related
I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is #types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save #types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on #types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.
Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package
Add saveSvgAsPng.js file into src/assets/js
And add this JavaScript file in scripts array in angular.json file
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare saveSvgAsPng in your component.ts
declare const saveSvgAsPng: any;
And call that when you need to download.
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
Make sure to restart your angular app (ng serve) if you change scripts array or declared name
I have installed complexity-report on a javascript project
Instalation is done using $ npm install complexity-report on the root directory of the project. I can run $ cr and it shows some configuration options like on the image above here.
What i don't know is which command i have to use or what steps i have to follow to calculate for example the complexity of a specific js folder?
I need some help with a description of how to use this tool. Some explanations of that tool are given here but i don't understand which is the next step to follow in my case.
Thanks in advance
Assuming I have the following project structure:
webapps
ProjectA
SomeClass.ts
Package.json
ProjectB
SomeClass.ts
Package.json
Common
LoggingClass.ts
Package.json
The Common "LoggingClass" need to import a module from NPM. Let's assume that module is UUID (https://www.npmjs.com/package/uuid)
The problem, or the challenge is the following: We want to use and import the "LoggingClass" in both ProjectA and ProjectB.
Thing is, they can import the code from the common folder without a problem, but then the module "UUID" is not existent in those project because we did not specify so in their own respective Package.json.
I do not want to create actual node modules since my code needs to be checked into a git repository. (Some people recommend to develop directly into node_modules directory).
I would like to know what other fellow typescript developers do in the community to share their code when using npm. (If it was only typescript files it wouldn't be a problem, but because of the dependencies we have on npm.. it gets complicated).
Any thoughts would be greatly appreciated !
I do not want to create actual node modules since my code needs to be checked into a git repository.
A real npm module is actually a way to go IMHO. You don't have to store it specifically in npmjs.org (you can have an own npm repository).
Some people recommend to develop directly into node_modules directory.
This is actually the most inconvenient way I can imagine of. Probably, I'm missing something important, but I'd love to know their way of thinking.
There are things you will not be able to [easily] achieve with git-only based solution. For example, how would you checkout a specific version of the shared code, with keeping the rest of the code intact? It is relatively easy when you have only one directory where all the shared code lives. But if you have many (basically, directories-as-packages) then it gets cumbersome. And even figuring out their "versions" is tricky too -- you'd have to invent and follow a git tagging rule or some other way to annotate commits.
Anyways, what I am trying to say is that my answer is not exactly what you asked for; my answer is rather a suggestion to reassess you position regarding (not) packing code into an npm module -- which is de facto a standard in the JavaScript/TypeScript community for a reason.
I would like to know what other fellow typescript developers do in the community to share their code when using npm
Since your requirement I do not want to create actual node modules since my code needs to be checked into a git repository.
I would simply reorganize as
webapps
package.json
projectA
SomeClass.ts
projectB
SomeClass.ts
Package.json
common
LoggingClass.ts
I haven't started a new web project for years, so the latest technologies went past me mostly unnoticed...
Now I need to create a little dynamic webpage, for which I mostly need jQuery and maybe one or two plugins. One of them requires a library called RequireJS, which I then had a look at and immediately fell in love with. Javascript just looked so much nicer suddenly! :-)
But... I had also found npm and really like the way of installing new packages. "npm install --save jquery" is just so nice and simple. Now, npm install tons of files in a node_modules sub-directory, which I don't really like. I only need one or two files per library!
So: is there a nicer way than npm to handle packages (i.e. only download the necessary files)? Especially one that works well with RequireJS? Or do I have to set up some other tools (found something called "grunt")? Can someone please give me a working example?
Thanks!
I want to try quill in my express.js app. So, I can install it using
npm install quill
but how do I actually use it with node?
I don't really understand why this is a node package since it basically only consists of a .css and a .js file and can be included directly inside the template which also makes most sense to me, because that's where the rich text editor takes effect.
I've seen a thread where one of the creators of quill (jhchen) was asked just that. I hope that helps someone.
Question:
Then what is the npm install command for?
Pretty much every application people build nowadays uses Browserify or Webpack to build things before the browser renders it, and if you can't even require() it, then how can you use it?
Answer:
You can absolutely require Quill for the purposes of building with Webpack or Browserify. You just can't run Quill in the Node.js REPL.
source: https://github.com/quilljs/quill/issues/1194