Angular add .js script to service

Question

I am trying to make a service for connection to GameSparks like so:

import { Injectable } from '@angular/core';

var gamesparks = new GameSparks();

var gsKey = "XXXXXXXXXX";
var gsSecret = "XXXXXXXXXXXXXXXXXXXX";
var gsCredentials = "";

@Injectable({
  providedIn: 'root'
})
export class GamesparksService {

  isLive = false;

  init() {

    if (this.isLive) {
        gamesparks.initLive({
            key: gsKey,
            secret: gsSecret,
            //credential: gsCredentials,
            onNonce: this.onNonce,
            onInit: this.onInit,
            onMessage: this.onMessage,
            logger: console.log,
        });
    } else {
        gamesparks.initPreview({
            key: gsKey,
            secret: gsSecret,
            //credential: gsCredentials,
            onNonce: this.onNonce,
            onInit: this.onInit,
            onMessage: this.onMessage,
            logger: console.log,
        });
    }

  }

  //Callback function to hmac sha256 a nonce with the secret. It's assumed you will have your own method of securing the secret;
  onNonce(nonce) {
    return CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(nonce, gsSecret));
  }

  //Callback to handle when the SDK is initialised and ready to go
  onInit() {
    console.log("Initialised");
  }

  //Callback to handle async messages from the gamesparks platform
  onMessage(message) {
    console.log("onMessage: " + JSON.stringify(message["scriptData"]));
  }

}

Now, the script does not know what GameSparks() and CryptoJS is and I guess it doesn't recognize the GameSparks SDK.

The SDK is placed in this folder:

./assets/gamesparks/gamesparks.js
./assets/gamesparks/gamesparks-functions.js
./assets/gamesparks/hmac-sha256.js

Now my service script above is placed here:

./app/services/gamesparks.service.ts

How do I implement the SDK into the service script?

Hoping for help and thanks in advance :-)

Screeper · Accepted Answer · 2019-10-05 10:01:46Z

1

The easiest way is to install it with npm. So you would have to install the packages:

npm install crypto-js

Sadly there is no package for the gamesspark-sdk. There you would have to import it from your assets source. Add the following lines in your code:

import * as gamesparks from './assets/gamesparks/gamesparks.js';
import * as gsf from './assets/gamesparks/gamesparks-functions.js';
import * as cryptojs from 'crypto-js'; //When installed by npm

Then you can use the functions by:

library.functionName()

answered Oct 5, 2019 at 10:01

Screeper

1581 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mansa Over a year ago

Oh yes... Thanks :-)

Adrian Brand · Accepted Answer · 2019-10-05 09:51:52Z

1

To use a JavaScript library in TypeScript you use the syntax

import * as yourName from 'pathToLibrary';

and then use it with

yourName.functionInLibrary();

answered Oct 5, 2019 at 9:51

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular add .js script to service

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related