How to import Javascript into global namespace in Angular2

Question

This question has been asked in different versions repeatedly, but none of the solutions I found fit to the specific case I'm trying to solve, so please bear with me.

I'm using Angular2. I'm trying to add a series of Javascript-Files, so that their contents are available to a component. Specifically, I'm trying to import the angular.js demo files from the Wacom Signature SDK.

There are three Javascript files which are throwing a series of variables and functions into the globale namespace. For example

SigCaptX-Globals.js

var wgssSignatureSDK = null;  // Signature SDK object
var sigObj = null;            // Signature object
var sigCtl = null;            // Signature Control object
var dynCapt = null;           // Dynamic Capture object
var wizCtl = null;            // Wizard object
var scriptIsRunning = false;  // script run status
var pad = null                // created on script start, sets pad control data from class CPadCtl
var inputObj = null;  

I have tried adding the files to the "scripts" definition in angular.json. Compilation works, so I think it's finding the files. But I have no clue how to make it so that I have access to the Billion global namespace variables and functions defined within these files.

Please explain it to me like I'm a child; I'm not smart.

Answer 1

TLDR:

From what you stated, you should be able to access the variables from your components, pipes, services, etc, directly from the window object, like, window.wgssSignatureSDK.

Long answer

The first thing you need to do, is adding the script to the runtime. Since you added the files to the angular.json file in the scripts properties, the JS files should be downloaded to the browser when the app starts and included in the HTML, effectively loading it to the JS runtime.

Note: The app must be recompiled when changes happen to the angular.json file.

Now, since the file is already loaded, technically, you could access the variables through the window global object, like, window.wgssSignatureSDK. Below there is an example of a JS lib.

// Yours or any third party library
var YourLib = {
  // It can have variables, constants
  PI: Math.PI,

  // It can have complex objects
  person: {
    name: 'John Doe',
    address: {
      street: 'No name',
      number: 10
    }
  },

  // It can also have functions
  add: function(a, b) {
    return a + b;
  },

}

Note: See that, it is important that you scope your variables and functions, so they don't live directly into the window object, so instead of using like this window.wgssSignatureSDK, we would use it like this window.YourLib.wgssSignatureSDK. This will help to avoid conflicts with other existing libraries and future additions to the window object.

However, to implement it the Angular way, we should avoid accessing the DOM and global variables directly, for that, we could make use of the dependency injection mechanism. Create a file to expose tokens to be used by the dependency injection mechanism. It should have at least one token per lib.

your-tokens-file.ts

import { InjectionToken } from "@angular/core";

export const YourLibTokenOne = new InjectionToken('YOUR_LIB_1');
export const YourLibTokenTwo = new InjectionToken('YOUR_LIB_2');

app.module.ts

// At the top of the file
import { YourLibTokenOne, YourLibTokenTwo } from './your-tokens-file';

const YourLibOne = (window as any).YourLibOne;
const YourLibTwo = (window as any).YourLibTwo;

// The module definition
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    // In here we are providing to the injectors a value for a specific token
    { provide: YourLibTokenOne, useValue: YourLibOne },
    { provide: YourLibTokenTwo, useValue: YourLibTwo }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now the libs are provided to the dependency injection mechanism, we now just need to inject it into the components, services, directives or any Angular class mechanism.

your-component.ts

import { YourLibTokenOne } from './your-tokens-file';

@Component({ ... })
export class YourComponent {

  constructor(@Inject(YourLibTokenOne) public yourLibOne: any) {
    console.log(yourLibOne.PI);
    console.log(yourLibOne.add(10, 20));
  }

}

Please explain it to me like I'm a child; I'm not smart.

No one knows everything, life is a learning journey, so don't be too hard on yourself :)