Load Javascript Scripts dynamically in Angular 4

Question

I want to Load a Script dynamic in Angular 4. The name for the Script itself will later be from an Ajax Call. Currently to load the JavaScript File i imported Jquery to my Angular Project. After that i use the GetScript Method and can load that file but if i want to invoke a function like this:

import { Component } from '@angular/core';
import * as jQuery from 'jquery';

declare var $:any;
declare var jquery:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'angular 4 with jquery';
  url = "currently hardcoded";

    getScript42(){
      $.getScript(this.url).done(function() {
      logger();
    });
    }
  }

I get the following error: Cannot find name 'logger'

But in my JavaScript File the function is defined:

$(document).ready(function(){

  function logger(){
  console.log("it worked");
  }
});

If i dont use a function for this it worked.

So now to my Problem do you guys know a way to load that File and invoke a specific function?

For what reason you asking? I got one button with a onclick method. — Henry Sachs
– Henry Sachs, Commented Sep 13, 2017 at 17:04
no reason i didn't :) !, i was just asking this : Hi Any html template references? — user8556290
– user8556290, Commented Sep 13, 2017 at 17:07
And I answered yes one button. Or what do you call html template references? — Henry Sachs
– Henry Sachs, Commented Sep 13, 2017 at 17:09
It was about a problem and understand a few more what you did, i have to go ;) cya — user8556290
– user8556290, Commented Sep 13, 2017 at 17:14

Aniruddha Das · Accepted Answer · 2017-09-13 15:38:34Z

1

In the angular life cycle AfterViewInit is called when the view is loaded, That means your html is dom ready and ready to accept any additional script tags.

so you can write these in your afterviewinit method by implementing the interface.

declare var $:any;
declare var jquery:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  title = 'angular 4 with jquery';
  url = "currently hardcoded";

      ngAfterViewInit(): void {
        $.getScript(this.url).done(function() {
          logger();
        });
    }
  }

answered Sep 13, 2017 at 15:38

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

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

2 Comments

Henry Sachs Over a year ago

I don’t have the possibility to try this currently but will come back to this.

Henry Sachs Over a year ago

so this still doesnt work for me and i get the same errors that he cannot find the name logger.

Collectives™ on Stack Overflow

Load Javascript Scripts dynamically in Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related