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;
Related
I have a project consisting of a TypeScript file and an HTML page. Currently, I am loading several libraries that the TypeScript file requires in the HTML Page by including them in tags, i.e. <script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>.
Since I would like to use the TypeScript code in other web pages without having to copy a bunch of script tags, is there a way I could load the libraries in the TypeScript file instead of in the HTML file? I tried searching it up and saw some options (for example, import and export) but just using import {Tabulator} from 'tabulator-tables'; obviously didn't work, and I'm somewhat lost.
Because you stated that you're not using any bundler, and that you don't want to use a UMD module in a <script> element, you'll need a version of tabulator-tables that is in the ES module format. It looks like the package provides one at https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.es2015.min.js. You can download that file locally to your project and import from it in your script like this:
import Tabulator from './relative/path/to/where/you/saved/tabulator.es2015.min.js';
You'll need to publish that downloaded module alongside your HTML file, JS file, etc. wherever you're serving the web page, and make sure that you set your own script's type attribute to module in the HTML.
I am trying to import a module from a generated Angular library bundle located inside a vendor subfolder under src/.
index.html
<head>
...
<script type="text/javascript" charset="utf-8" src="./vendor/example/bundles/example.umd.js"></script>
</head>
Nevertheless, I am having some troubles importing module from this in my app.module.ts. Please, any idea of how to do it?
It seems that #angular/core and #angular/common peerDependencies of angular library should also be bundled inside script to work correctly.
I will appreciate any kind of help
You shouldn't add a <script> tag that refers to a local file because this local file won't be included in the build.
Instead, use the scripts configuration section of the angular.json file, like this:
"scripts": [
{ "input": "src/vendor/example/bundles/example.umd.js" }
]
This will embed the example.umd.js file inside a dedicated file of the Angular's build. As it's packaged as UMD, an object will be attached to window which contains the API of the library you are importing.
In order to stop TypeScript for complaining about a non-existent variable, just add this: declare var example; (replace example with the real name of the global object).
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 trying to import an external library. The library is simply a js file that defines an object var library = {...}, it has no exports, modules or anything like that whatsoever.
I don't want to use a script tag on the index.html file. How should I import this in my Angular 2 app, in a clean way?
If you are using Angular-CLI, you can inject these dependencies by including your .js files in angular-cli.json.
Take a look at 3rd Party Libraries.
I am using tsc.exe manually, is there a way for me to basically pass it a load of Typescript files under a root namespace and just compile it to a single namespace encapsulated js file?
I am thinking like how you have a .net dll which contains the root namespace and all children.
I managed to find some links after posting this:
TypeScript compiling as a single JS file
http://www.codebelt.com/typescript/typescript-compiler-commands/
Both of which helpped me, the actual answer is:
tsc.exe --out some_file.js some_ts_file.ts some_other_ts_file.ts