Call pure javascript function from Angular 2 component

Question

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();
}

Answer 1

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.

Answer 2

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