undefined error while calling a javascript function in angular 2

Question

Can anyone help me how to call a function from external js file inside my angular2 component. Below is my code snippet, when I am trying to load the application it is throwing App is undefined error.

Here is my component code:

import { Component, OnInit, AfterContentInit } from '@angular/core';

@Component({
    selector: 'test',
    templateUrl: './test.html'
})

export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() {

    }

    ngAfterViewInit() {
        App.handleInit();
    }
}

here is my script inside app.js:

var App = function() {
    var handleInit = function() {
        console.log("Hello world");
    };
}();

When we are calling a function inside ngAfterViewInit it is throwing App is undefined error.

We are importing app.js file inside vendor.ts and we are using webpack. Here app.js is loading fine but function was not working.

Please help us with a solution.

Thanks in advance.

create an interface for you js file and load that in you app module and access that method inside your angular 2 component — balajivaishnav, Jun 13 '17 at 12:27

score 0 · Answer 1 · edited Aug 15 '17 at 12:59

0

You can access like that. does this help

import { Component, OnInit, AfterContentInit } from '@angular/core';
import '../../../../js/app.js'; //just example set this based on your path
declare var App: any;

@Component({
    selector: 'test',
    templateUrl: './test.html'
})
export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() { }

    ngAfterViewInit() {
        this.handleInit();
    }

    hadeleInit() {
        new app.handleInit();
    }
}

edited Aug 15 '17 at 12:59

ndsmyter

6,535
3
22
37

answered Jun 13 '17 at 11:32

Shailesh Ladumor

7,052
5
42
55

Hi Shailesh Ladumor, Thanks for your quick response, but here the problem is there is no export member in our app.js file(like App), so we are unable to import like what you suggested. Is there any other approach? – Surya Jun 13 '17 at 11:55
where you add this js file? – Shailesh Ladumor Jun 13 '17 at 12:03
i have updated my answer. you need to import app.js file – Shailesh Ladumor Jun 13 '17 at 12:08
Still we are getting App is not defined error like below. Uncaught (in promise): Error: Error in :0:0 caused by: App is not defined – Surya Jun 13 '17 at 12:17
possible duplicate https://stackoverflow.com/questions/41120754/using-external-js-libraries-in-my-angular-2-project – Shailesh Ladumor Jun 13 '17 at 12:20
When we tried to load the app.js file inside index.html everything working fine. But We don't want to load in it. – Surya Jun 13 '17 at 12:27
It is working fine only when I am loading js files inside index only why? – Surya Jun 13 '17 at 12:45

score 0 · Answer 2 · answered Jun 13 '17 at 11:51

0

You have to just simply define App variable in your component as below.

declare var App: any;
@Component({
   .....
})

And now your below call will work.

ngAfterViewInit() {
    App.handleInit();
}

answered Jun 13 '17 at 11:51

Sandip - Frontend Developer

14,397
4
35
61

Hi Sandip, Thanks for your response, We tried the above but still getting App is undefined error. – Surya Jun 13 '17 at 12:03
Is your JS is available in DOM? because I have tried this type of code in several component and it works for me – Sandip - Frontend Developer Jun 13 '17 at 12:05
Yes the file is loading but function is not calling. We are loading the js files in vendor.ts but not in index.html file. – Surya Jun 13 '17 at 12:08
It seems when you call your function JS file and within function is not reachable, you have to import OR link that JS to global OR in required comonent – Sandip - Frontend Developer Jun 13 '17 at 12:10
Is there any way to define java script variables globally? – Surya Jun 13 '17 at 12:12
Globally means define in your main landing page, if your page refresh and landing page change then you have to define in your current component – Sandip - Frontend Developer Jun 13 '17 at 12:13
When we tried to load the app.js file inside index.html everything working fine. But We don't want to load in it. – Surya Jun 13 '17 at 12:16
1

You can load that javascript in your comoponent as well look at here: https://stackoverflow.com/a/44276683/6606630 – Sandip - Frontend Developer Jun 13 '17 at 12:18
Is it better way to load external js files inside index.html in an angular2 application with webpack? – Surya Jun 13 '17 at 12:34

undefined error while calling a javascript function in angular 2

2 Answers2