Add external JS file in component to render images in browser with Angular 2

Question

I make a site with Angular 2 and will add a JavaScript file to the component. This script must render the height of some images equal to the height of the window of the browser.

How could I add this script to the component?

The solutions I found on SO or anywhere else, looks like this:

import './home.component.js';

But it's not what I need! I need this in my home.component.ts file:

@Component({
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    jsUrls: ['./home.component.js']
})

or something...

Update 1: In my site I use Angular CLI and TypeScript.

Update 2: You could find my project on GitHub: https://github.com/WatchFriends/Web

The way to do that is adding the script to your index.html, then in your home.component.ts import the definition of that myScript.js if you have a definition, if not just add declare var myScript; and then access to the functions with myScript.myFunction(...); — dlcardozo
– dlcardozo, Commented Dec 23, 2016 at 18:34
What are you using to build your project? The CLI has a way to do this, and webpack does as well. There's the script_loader loader which adds it to the bundle, and so on. Need to know a little more about your buildout. — Tim Consolazio
– Tim Consolazio, Commented Dec 23, 2016 at 18:36
I think then you just use the "script" array of the angular-cli.json file. "scripts": [ "path_to_file/file.js" ] In webpack, you can use script_loader directly (I do this and it's easy). But I think the CLI intentionally hides webpack complexity from you. — Tim Consolazio
– Tim Consolazio, Commented Dec 23, 2016 at 19:24
@TimConsolazio: no I've got this error: Argument of type '{ templateUrl: string; styleUrls: string[]; script: string[]; }' is not assignable to parameter of type 'Component'. by using script or scripts. — H. Pauwelyn
– H. Pauwelyn, Commented Dec 24, 2016 at 9:14

Tim Consolazio · Accepted Answer · 2016-12-24 14:31:46Z

This works, and works well:

In the angular-cli.json file, there is a section, "scripts". Add the path to your script in that array (as a double-quoted string).

Here's a frag from that file:

  "mobile": false,
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
  ],
  "scripts": ["./app/my_script.js"],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }

my_script is this:

function sayHello ( ) {
   console.log ( 'I am saying hello' );
}

Then just call it like you'd expect from anywhere. To beat the annoying "not found" error you may get in your IDE, you can either just do this:

window [ 'sayHello' ] ( );

Or create a utility class that contains a reference to that function, such that you can import the class and call the function as usual (you are basically just providing a framework facade for your "my_script.js" functions).

I tried both, it worked just fine, no errors (you are using ng serve or ng build of course etc).

I turned it into one of my Ang2 articles, look under "errata": tcoz.com

Collectives™ on Stack Overflow

Add external JS file in component to render images in browser with Angular 2

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related