How to call a Javascript function from a Typescript class that works with Internet Explorer 11 and Microsoft Edge?

Question

In an angular 7 project i need to use a javascript function from a Typescript class, where i'm using declare var getFormData: any; to use the function getFomData, and it works ok in Chrome and Firefox but in Internet Explorer 11 and Edge 42 i get the error "ReferenceError: 'getFormData' is not defined

I'm just calling the function as getFormData(this.formElement);

The only way i've found that works is when i copy the entire javascript in the typescript class.

tsconfig.json

        "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",`
        "lib": ["es2017", "dom"],

extract from angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project_name": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico", "src/manifest.json"],            
            "scripts": [
              "node_modules/chart.js/dist/Chart.bundle.min.js",              
              "src/assets/libs/jquery.js",             
              "src/assets/libs/getformdata.js",
              "src/assets/libs/flatpickr.js"
            ]
          },
          "configurations": {
            "dev": {
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
        ....
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project_name:build"
          },
          "configurations": {
            "dev": {
              "browserTarget": "project_name:build:dev"
            },

Thanks in advance!!

Answer 1

You could call javascript function in .ts file like below:

1. Put the .js file in assets/javascript folder. For example, I use demo.js here:

   export function test1(){
     console.log('Calling test 1 function');
   }
   

2. Create demo.d.ts file in assets/javascript folder. The .js file and the .d.ts file should have the same name:

   export declare function test1();
   

3. Call the javascript function in component.ts file:

   import { test1 } from '../assets/javascript/demo'; 
   ...
   export class AppComponent {
     constructor() {
       test1();
     }
   }
   

I test it in Chrome, Edge and IE and it works. You could find the whole demo here.