28

I have one file that have dozens javascript functions. What I want to do is to import that file into Angular 2 component and run init() function that is defined in "external.js" file.

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

import "../../../../assets/external.js";

@Component({
    selector: 'app-component',
    templateUrl: 'app.component.html'
})
export class ComponentNameComponent implements AfterViewInit {
    constructor() { }

    ngAfterViewInit(): void {
      // invoke init() function from external.js file
    }
}

external.js is loaded using import and in ngAfterViewInit() I want to invoke init() function that is in external.js that calls all other methods in that external file.

Here is part of external.js:

function init() {
  callFunction1();
  callFunction2();
}
Haris Hajdarevic
  • 1,535
  • 2
  • 25
  • 39

3 Answers3

44

You can import and declare your external object. after then you can use it in your component.

import 'external.js'
declare var myExtObject: any;

I made an example in plunker: https://plnkr.co/edit/4CrShwpZrDxt1f1M1Bv8?p=preview

Hope this helps.

hakany
  • 7,134
  • 2
  • 19
  • 22
  • 2
    I followed your example. I created `var webGlObject = (function() { return { init: function() { init(); } } })(webGlObject||{}) ` and in ngAfterViewInit() tried to access with ` webGlObject.init();` but I'm getting error `errors.service.ts:29 ReferenceError: webGlObject is not defined` – Haris Hajdarevic Nov 16 '16 at 15:44
  • I have updated plunker with your webGlObject and it is working. Only thing I have changed is that you are calling init() in init function. – hakany Nov 16 '16 at 17:01
  • if you still get an error could you provide more information or create in for example in plunker, jsfiddle or something else? – hakany Nov 16 '16 at 17:18
  • 3
    the problem was because my script external.js was imported on the way that I described above. I move it to index.html and include it via – Haris Hajdarevic Nov 19 '16 at 07:32
  • This script seem to run when you move the js file to index.html. But the browser still complains `ReferenceError: webGlObject is not defined`. The solution for me was adding all the JS files under `scripts` in `angular-cli.json` – Niroshan Nov 21 '17 at 15:30
  • I followed your examples. I receive TypeError: pm.loading is not a function. Loading is basically you func1 from plnkr example. – Kutas Tomy Dec 21 '17 at 13:48
  • In angular 4 and 5 you can import the javascript using: import {filename} '../file/location/filename.js'; – Jnr Apr 10 '18 at 11:40
  • plunker unpkg.com references are not there anymore (404). – gerleim Jun 06 '18 at 08:24
7

Checkout my git project of angular 6 - I used this in login component -

https://github.com/gajender1995/Angular-HighChart-Auth

exter.js

define(["require", "exports"], function(require, exports){
   exports.value = "aaa";
   exports.gajender = function(){console.log(2)}; 
});

login.component.ts

 import * as MyModule from './exter.js';

 console.log('my value is', MyModule.gajender());

In tsconfig Add

"allowJs": true
Gajender Singh
  • 1,285
  • 14
  • 13
0

You need to import the javascript file like this:

import * as myjsname from '../../mypathto/myjavascriptfile.js';

You invoke a routine from the javascript file like this:

myjsname.myjsroutine();

Important, you need to use the export keyword in the javascript file like this:

export function myjsroutine() {
  //my js code
}
StackOverflowUser
  • 945
  • 12
  • 10