Как вызвать функцию Javascript из класса Typescript, который работает с Internet Explorer 11 и Microsoft Edge?

Question

В проекте Angular 7 мне нужно использовать функцию javascript из класса Typescript, где я использую , объявляем var getFormData: any; , чтобы использовать функцию getFomData, ион работает нормально в Chrome и Firefox, но в Internet Explorer 11 и Edge 42 я получаю ошибку "ReferenceError: 'getFormData' не определено

Я просто вызываю функцию как getFormData (this.formElement);

Единственный способ, который я обнаружил, работает, когда я копирую весь javascript в класс машинописного текста.

tsconfig.json

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

выдержка из 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"
            },

Заранее спасибо !!

Answer 1

Вы можете вызвать функцию javascript в файле .ts, как показано ниже:

1. Поместите файл .js в папку assets/javascript.Например, я использую demo.js здесь:

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

2. Создать demo.d.ts файл в папке assets/javascript.Файл .js и файл .d.ts должны иметь одинаковые имена:

   export declare function test1();
   

3. Вызвать функцию javascript в файле component.ts:

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

Я тестирую его в Chrome, Edge и IE, и он работает.Вы можете найти всю демоверсию здесь .