I want to use the simple example dropzone js in an angular 2 project:
http://www.dropzonejs.com/examples/simple.html
Is there an easy way to use the js for simple drag and drop functionality? I tried adding installing using:
npm i dropzone --save
And referencing the script from node_modules in index.html, but it doesn't seem to work.
Plunkr:
http://plnkr.co/edit/Gk2xtoH1FhOe6hko6z8K?p=preview
Currently, The easiest way to include an external library into an angular 2 project is as follows:
1) include it in your HTML file as a script tag
<script src="js/your-library.js"></script>
2) To use the library you must add the following to one of your ts/js files:
declare var libraryVar: any;
or
var libraryVar
Where libraryVar is the name of a function from the library you're including, so for example, to include jQuery, you would use:
declare let $:any;
Related
After I build my angular app, I have to perform one last manual step to get my program to run: The platform it runs on has a requirement that its javascript file is in the <head> of the html file that is running. Their .js is on a CDN. So basically, post-build, I have to open up index.html and add the following:
<script src="https://cdn.fragilecorp.com/lib/js/platform.js" type="text/javascript"></script>
Is there a way I can accomplish this automatically using angular configs or a different way?
Yes, in .angular-cli.json (.angular.json in older versions), I believe you can add what's inside of src to the scripts array.
Check this out:
How to include external JS file to angular5?
I want to use an external javascript library in an angular 4 component but I am having trouble using it.
The library I want to install is the plaid link library and I have downloaded the .js file and added it to the assets folder and included it into angular-cli.json scripts location.
The object imported from the class is giving me the error Plaid is not defined. How can I successfully include the pure javascript file into angular typescript?
This is the file I would like to include:
https://cdn.plaid.com/link/v2/stable/link-initialize.js
Thanks
It looks like your library has a Plaid object, which is not known to the TypeScript compiler.Create a file src/typings.d.ts with the following content:
declare var Plaid: any;
Or you can declare this variable inside your component:
var Plaid: any;
I'm trying to add an external js file into my Angular2 project by adding the record to my angular-cli.json file.
I've added a file to the [scripts] array as below:
"scripts": ["https://as-identitydemo--c.na50.visual.force.com/resource/1495420277000/salesforce_login_widget_js"],
all the other posts that i've read refer to using this format for something that's either hosted locally, or installed in the node_modules etc..
How can I include an external js library and utilize that in my project?
You should import the library in your index.html in the head tag.
Second you have to make the library visible to your Angular project. That means you need the typings. You can either search https://github.com/DefinitelyTyped
for already existing types or add the types to the typings.d.ts file.
Example:
In your page (outside of the Angular app) you might have a javascript global variable:
var testVar = 'testvalue';
Then in the typings.d.ts you can make this variable globally accessible by adding
declare var testVar:string;
Then you can access this variable in the whole Angular project like that:
console.log(testVar);
The same you can do with functions in external libraries.
Here is a Plunk that shows that (without having a typings file). Hope this helps.
I am new with Angular and Angular 2, and I would like to use the following external lib in my project:
http://angularjs.jqueryrain.com/draw-polygons-image-angularjs-canvas/
To use this lib, I have put the following line in my index.html file before angular:
<script src="./lib/angular-canvas-area-draw.js"></script>
But I have the following error:
Uncaught ReferenceError: angular is not defined
at angular-canvas-area-draw.js:3
at angular-canvas-area-draw.js:234
How should i resolve this problem?
Assuming by your tags, you are trying to use an AngularJs plugin inside an Angular application, that won't work (Or at least it would be pretty hard to get it running by using the upgrade adapter and some zonejs hacking). Try to find the plugin for Angular instead of AngularJs.
But if your tags are misleading and you're using AngularJs than make sure AngularJs in included before the plugin.
<script type="text/javascript" src="./lib/angular.min.js"></script>
<script src="./lib/angular-canvas-area-draw.js"></script>
Move your dependencie into .angular-cli.json file under scripts like this
"scripts": [
....,
"./lib/angular-canvas-area-draw.js"
],
from the latest angulae cli you have to add all external files(css and js) under the script and style tag in the angular-cli.json file
I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.