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
– balajivaishnav, Commented Jun 13, 2017 at 12:27

Sandip - Frontend Developer · Accepted Answer · 2017-06-13 11:51:31Z

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, 2017 at 11:51

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

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

9 Comments

Surya Over a year ago

Hi Sandip, Thanks for your response, We tried the above but still getting App is undefined error.

Sandip - Frontend Developer Over a year ago

Is your JS is available in DOM? because I have tried this type of code in several component and it works for me

Surya Over a year ago

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.

Sandip - Frontend Developer Over a year ago

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 Over a year ago

You can load that javascript in your comoponent as well look at here: stackoverflow.com/a/44276683/6606630

|

ndsmyter · Accepted Answer · 2017-08-15 12:59:42Z

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, 2017 at 12:59

ndsmyter

6,6453 gold badges24 silver badges38 bronze badges

answered Jun 13, 2017 at 11:32

Shailesh Ladumor

7,2515 gold badges44 silver badges60 bronze badges

7 Comments

Surya Over a year ago

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?

Shailesh Ladumor Over a year ago

where you add this js file?

Shailesh Ladumor Over a year ago

i have updated my answer. you need to import app.js file

Surya Over a year ago

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

Shailesh Ladumor Over a year ago

possible duplicate stackoverflow.com/questions/41120754/…

|

Collectives™ on Stack Overflow

undefined error while calling a javascript function in angular 2

2 Answers 2

9 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related