Best practice to include external javascript libraries

Ionic Framework ionic-v3
1

Hi there!

I’m wondering what’s the best way to include external javascript files (no typescript module available) into an app.
I already read this blogpost but I can’t find the point where the javascript file is added to the index.html.
Also, I tried to copy the js files into www/build/js with gulp scripts copy:

    gulp.task('scripts', function () {
    return copyScripts({
        src: [
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/fhirclient/fhir-client.js',
            'node_modules/es6-shim/es6-shim.min.js',
            'node_modules/angular2/bundles/angular2-polyfills.min.js',
            'node_modules/rxjs/bundles/Rx.js',
            'node_modules/systemjs/dist/system.src.js',
            'node_modules/systemjs/dist/system-polyfills.js'
        ]
    });
});

And in my index.html:

<script src="cordova.js"></script>
  <script src="build/js/angular2-polyfills.min.js"></script>
  <script src="build/js/es6-shim.min.js"></script>
  <script src="build/js/app.bundle.js"></script>
  <script src="build/js/system.src.js"></script>
  <script src="build/js/system-polyfills.js"></script>
  <script src="build/js/Rx.js"></script>
  <script src="build/js/jquery.min.js"></script>
  <script src="build/js/fhir-client.js"></script>

All these tries lead to a ReferenceError where Angular2 can not find the external library (a FHIR object in a service class).

I already managed to include the libraries into a normal angular2 project using this blogpost: https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project

So what is the best practice to do include an external javascript library that does not offer a typescript module?

Thanks in advance

2

So this is a bit off from what you need to do.

When you install a node module, say jquery, you can do

npm install jquery --save

And at build time, it will be bundled together into your main app.bunlde.js.

You shouldn’t be adding additional script tags to your index.html.

3

ok thanks, that’s good to know. So, all dependencies listed in package.json are bundled to app.bundle.js?
And how to deal with dependencies that I can’t install with npm?

1 Like
4

@mhartington I have the same case here:
What is the common way to add these kind of libs into an ionic2 project?

  1. deps which are in npm but have no typings: aruco
  2. deps which neither in npm nor in bower and have not typings: awe.js
  • Would you suggest to contribute to the typings project and write our own d.ts-files? (described on stackoverflow)
  • Or is there another way to use js-libs?

(I am new to ts and js but I am keen on learning :))

Thanks in advance

5

Hey @voma0001,

finally, we solved our problem by adding the custom JS files to the scripts task of gulpfile.js like this:

gulp.task('scripts', function () {
    return copyScripts({
        src: [
            'node_modules/jquery/dist/jquery.min.js',
            'node_modules/es6-shim/es6-shim.min.js',
            'node_modules/angular2/bundles/angular2-polyfills.min.js'
        ]
    });
});

Do not forget to add ‘node_modules/es6-shim/es6-shim.min.js’ and ‘node_modules/angular2/bundles/angular2-polyfills.min.js’ as they are the default value (see here).
Then, include the JS files to your html file:

<script src="build/js/jquery.min.js"></script>
2 Likes
6

Hi,
I’m trying to use js-marker-clusterer (https://www.npmjs.com/package/js-marker-clusterer) in my ionic 2 app.

I installed the module with :
npm install js-marker-clusterer --save

I have now a ‘js-marker-clusterer’ folder in node-modules

I put import {MarkerClusterer} from 'js-marker-clusterer'; in my ionic 2 app/page.js

But when I use “new MarkerClusterer(this.map);” in page.js, I get : TypeError: 'undefined' is not a constructor.

I tried @t4deon solution but it still not working :frowning:

How I can access to MarkerClusterer ?

Thanks in advance

7

@mhartington I tried your advice

but did not find anything of the code in app.bnundle.js, only the solution of @t4deon seems to work. `We used

gulp.task('scripts', function () {
  //copyScripts();
  return copyScripts({
    src: [
      'node_modules/es6-shim/es6-shim.min.js',
      'node_modules/es6-shim/es6-shim.map',
      'node_modules/zone.js/dist/zone.js',
      'node_modules/reflect-metadata/Reflect.js',
      'node_modules/reflect-metadata/Reflect.js.map',
      'node_modules/justgage/justgage.js',
      'node_modules/justgage/raphael-2.1.4.min.js'
    ]
  });
});

Could you clarify this issue? IMHO this is rather fundamental.

1 Like
8

Just want to complete the solution in the perspective of how to reference the non typescrip mapped library in the component.

Once you have the library copied as the accepted answer, reference it in the desired component in a type unsafe way. Afterwards you call the desired library function.

In my case I needed the Secure Hash Algorithm from jssha and referenced it in the component like (just after the imports):

declare var jsSHA:any;

then inside the function requiring the hashing:

this.shaObj = new jsSHA(“SHA-256”, “TEXT”);

Please note the copied file in gulp was sha.js and the exports of this file is jsSHA.

http://stackoverflow.com/questions/27417107/how-use-an-external-non-typescript-library-from-typescript-without-d-ts

9

@voma0001 Were you ever able to successfully import awe.js?

1 Like
10

No sorry, we used another AR library / plugin (the wikitude plugin) in the end. I didn’t try to add awe.js any more.

11

Ah okay thanks for the heads up.