Angular 2 add javascript lib - javascript

I want to add this library to my angular webapp
<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
But i havent been able to do it. What would be the correct way to integrate a javascript library?

The underlying issue is that Typescript won't understand the types used by the library because it's in JavaScript form. Take a look on this github site for the library you want to load and then you can install the type signatures:
https://github.com/DefinitelyTyped/DefinitelyTyped

Related

Best practice: Typescript: Let a customer extend an application with custom code

we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.

How to make use of an external Js file in .net core 2.1 and Angular 6

I am new to Angular 6 and .Net Core 2.1. I've created a some application but now I need to make use of jquery events. I have installed Jquery packages to node_modules as well.
Could anyone please help me!!
Thanks in advance
Even in the angular-cli.json file, I've added the jquery files and my custom js file.
But still not working.
Below are my configuration and code
Solution Structure
You will find here an example link
I would recommend to keep JQuery out of your Angular project. You have to understand how Angular 2+ works and you will see that there is no need for JQuery.
With JQuery you were selecting an element in the page and modify it but with Angular the UI changes based on a model property. It is another way of thinking about the UI.
You can read more about the differences between the two here link. I also tried to use JQuery when I began using Angular because of my previous experience but I learned that was a mistake.
if you want to use jQuery u will need to put the files in the wwwroot folder. You can link it from there.

How to use external js library functions in Angular 7 project?

We are creating one project in angular 7. We want to use jquery based library as image picker.
We have imported the library correctly as
import * as 'image-picker' from '..asset/image-picker.min.js'
Also it has been imported as script in index.js with correct path.
Now we are getting stuck about the correct use of this file in Typescript environment.
For example how to use the below example method of the above library in
Angular Module in component and templates.
You CANNOT use jquery based libs in Angular context.
It was clearly not a good practice with the old fashionned AngularJS 1.**, now it's not even possible.
EDIT :
According to this source, it's seem's possible.
But for me, it's clearly not a good idea to insist on using Jquery with Angular 7
I saw this library using jquery so
If you using external library you need to include script of that library in your website using script tag or if you using angular cli you need to edit your angular.json and include that script
then use it in your method
$("select").imagepicker()
You can go to my blog to read detail how to integrate third party library to angular here

WebStorm does not show auto complete for pure JS libraries in a TypeScript context

Let’s say I have a JS library “A”. I can use it in a JS project in WebStorm and all available methods are shown in auto complete correctly.
Then I use the same library “A”, but it does not have a #type file. When I import it and try to use it in TypeScript context, no auto completion is shown.
How can I configure to show JS auto completion in this case?
Please only read below if the above information is Not clear enough.
Actually the problem is more complicated than that. I’m using couchbase js lib in my node.js TypeScript project. Couchbase js lib actually has a type file for me to use (download from npm). But the type file is not updated with the latest couchbase js, specifically the cluster.authenticate method. When I’m under the outdated type file and try to use this method, it doesn’t even compile since the method does not exist in the type file. So I have to remove the type file and use the pure JS library.
Any idea how to solve this?
Attach two screenshot to illustrate

How to use Typescript or an UMD module in a WebSite project(not SPA)

Typescript is a great language, but I haven't use it in my project, the reason is that my project is a traditional website with many page (asp.net core MVC), and all tutorial I can found is for SPA (anglerjs,vuejs ect.) and I use many jquery plugins in my project. and I'm confusing about javascript's module system.
and here is my question:
do I must using npm, and how do I configurate it to download package to the folder I wanted ?
how do I load jquery and it's plugin ?
what module loader should i use?
do I must use webpack ? and how to config (multiple output files are needed)
I already try to use typescript without module , and use namespace instead but a problem is that I can't define a repeated public function or variable (sometime I copy and paste code from one to another, and a few file structure similar but not the same (they expose the same variable but they don't in one page))
I know there a lots of question there, but even if you only know one answer of above question, please share you answer to me! it will be really helpful

Categories