CODEWITHSUNDEEP
javascriptangularreferenceglobalangular-cli-v6
Steve Ray
Steve Ray

Reputation: 23

How to properly use 3rd party javascript libraries in Angular 6+

I would like to use some 3rd party libraries in my Angular project, but since version 6 of Angular I get the reference error: global not defined. I've installed the library and added the @types library too. Unfortunately I didn't get it to work yet.

Is there anyone who can explain to me how to use 3rd party libraries in angular 6 and higher? I don't want to revert back to Angular 5 just for a javascript library.

Upvotes: 1

Views: 1468

Answers (2)

Xinan
Xinan

Reputation: 3162

There are several ways to use it depends on what you need exactly.

Generally speaking for those legacy un-typed js library you can always use something like the following:

import * as jquery from 'jquery'

For libraries that require global access, you might need to tweak angular.json file and add reference to scripts field:

"scripts": [
    "node_modules/zoomooz/jquery.zoomooz.min.js"
],

For some tricky library with default export statements, you might even need to do:

import LIBRARYNAME from 'library-name' (without brackets)

So it really depends on what you need.

Upvotes: 1

Outman
Outman

Reputation: 3330

add this to your index.html

<script>
  if (global === undefined) {
    var global = window;
  }
</script>

from: https://github.com/aws-amplify/amplify-js/issues/678

Upvotes: 1

Related Questions