Angular4 - Use a function inside a JavaScript file

Question

I'm trying to load a JavaScript file into my angular component. I have loaded the full minified version from here: https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image.all.min.js and also put any related scripts in my scripts folder.

When the code runs and reaches 'loadImage', the console fires an error:

ERROR ReferenceError: loadImage is not defined

What's the best way to resolve this?

Component

import '../../../assets/scripts/load-image.all.min.js';
declare var loadImage: any;

...

dropChangeHandler(e) {
   e.preventDefault()
   e = e.originalEvent
   var target = e.dataTransfer || e.target
   var file = target && target.files && target.files[0]

   var options = {
     maxWidth: 1000,
     maxHeight: 1000,
     canvas: true,
     pixelRatio: window.devicePixelRatio,
     // downsamplingRatio: 0.5,
     orientation: true
   }
   if (!file) {
     return
   } else {

   this.currentFile = file;   
   if (!loadImage(file, this.updateResults, options)) {

   }

  }
}

I think this question is slightly different to the other 'import JS files into angular' because I have a feeling it might be to do with the library I'm trying to import. However, I'm unsure and seeking advice on this one.

Possible duplicate of How to use javascript functions in an Angular 2 component from a different file — Abhijeetk431
– Abhijeetk431, Commented May 25, 2018 at 9:58

Eugene Gavrilov · Accepted Answer · 2018-05-25 11:32:55Z

1

The library you are trying to import doesn't support es6 modules. Because of no exports in the library, it doesn't add any variables to your scope after import.

In your particular case easiest is to add the script to index.html:

<script src="assets/scripts/load-image.all.min.js"></script>

and call a method in the component with

window.loadImage(file, this.updateResult, options)

I use window because library directly binds itself to window.object

More details

To use javascript modules with typescript add allowJs: true to tsconfig.js file.
import './file is known as an import for side-effects only and don't change the scope of the module, but can access to global app scope. It can help you in case you want to extend already imported module.
You could import js module different ways:
- For CommonJs modules it's possible to use import * as ModuleName from './modulePath.js'; in your component.ts file and call as ModuleName.exportedMethod().
- to the Angular pipeline to be sure it is loaded with the module which imports it. If you are using angular cli, simply include it to you angular-cli.json in the section apps/scripts:
```
{
  "apps":
     ...
     "scripts": [
         "assets/scripts/load-image.all.min.js"
     ]
}
```
- If you don't use angular-cli, you can include to your index.html: <script src="assets/scripts/load-image.all.min.js"></script>

edited May 25, 2018 at 11:32

answered May 25, 2018 at 10:16

Eugene Gavrilov

2,9132 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user8516249 Over a year ago

Awesome. Didn't know you could do that. A couple of things happened when I changed to the above. Visual Code states that file was "resolved from '...' to '..' but '--allowJs' is not set." - It compiles anyway. In the browser I run the code and now get "LoadImage.loadImage is not a function" - Am I missing anything obvious here? To clarify, I removed any reference in the angular-cli.json file and have just implemented the above. Thanks again Eugene!

user8516249 Over a year ago

I've just seen your updated comment. I removed the component import and added the script to the angular cli file. Is that correct? Or do I need both? If I have both it fails to compile. If I have the reference just in angular-cli, how do I call it in the component file? Appreciate your time! :)

Eugene Gavrilov Over a year ago

You are right, thanks for correcting! You can import it only one way, not both. I will correct the answer.

user8516249 Over a year ago

Thanks Eugene. I'm a little confused as to what's happening. If I include the script in either the index file, or angular-cli, the browser console will throw the error: "Uncaught ReferenceError: require is not defined". However, if I import the file into my component.ts file (not the module), and then reference the function as Loadimage.loadImage, it states that "LoadImage.loadImage is not a function". Any ideas?

Eugene Gavrilov Over a year ago

That's good you add --allowJs to your tsconf. I just realised that your library just doesn't use any value to export and bind loadImage function directly to window object.

|

Bernd Schuhmacher · Accepted Answer · 2018-05-25 10:02:57Z

0

I think you need to export the wanted function in your imported file.

answered May 25, 2018 at 10:02

Bernd Schuhmacher

1398 bronze badges

1 Comment

user8516249 Over a year ago

Thanks for the reponse Bernd. Apologies. New to this. Are you referring to the 'load-image.all.min.js' file? If so, how do you set up an export?

segito10 · Accepted Answer · 2018-05-25 10:05:10Z

0

you must unsusure that the library is will be compiled Add the script in angular-cli.json

"scripts": [
....
'<path to file>/assets/scripts/load-image.all.min.js'
....
]

then

declare var loadImage: any;

answered May 25, 2018 at 10:05

segito10

3886 silver badges14 bronze badges

1 Comment

user8516249 Over a year ago

Thanks Segito - I also tried this. The solution compiles, but the browser console reads 'Uncaught ReferenceError: require is not defined'

Collectives™ on Stack Overflow

Angular4 - Use a function inside a JavaScript file

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related