javascript angularjs typescript unity-webgl

Create a d.ts file to UnityLoader.js (Unity3D)

I have to import UnityLoader.js in Angular using TypeScript. However, that lib don't have ts declaration and need configuration variable (array) to work (See below) .

Link to UnityLoader.js

Default implementation:

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Test Unity</title>
    <style>
    /* a style sheet needs to be present for cursor hiding and custom cursors to work. */
    </style>
  </head>
  <body>
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
    <script type='text/javascript'>
/* Configuration variable here !! */
  var Module = {
    TOTAL_MEMORY: 268435456,
    errorhandler: null,         // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
    compatibilitycheck: null,
    dataUrl: "Development/ExportMiniDev.data",
    codeUrl: "Development/ExportMiniDev.js",
    memUrl: "Development/ExportMiniDev.mem",

  };
</script>
/* Library call here !! */
<script src="Development/UnityLoader.js"></script>
  </body>
</html>

I have read all docs and I followed this to create a declaration file.

Here my declaration file (index.d.ts):

// Type definitions for UnityLoader 5.4.3.f1
// Project: UnityLoader
// Definitions by: Alexandre Hagen <https://github.com/AlexandreHagen>

declare namespace UnityLoader {

    interface Module {
        TOTAL_MEMORY: number,
        errorhandler?: boolean,
        compatibilitycheck?: boolean,
        dataUrl: string,
        codeUrl: string,
        memUrl: string
    }

}
export {};

My Folder Structure in node_modules :

    .
    ├── ...
    ├── unity-loader                  
    │   ├── index.d.ts    # Ts declaration file
    │   ├── index.js    # It is a remame of UnityLoader.js
    │   └── package.js    # Package to npm
    └── ...

But I still don't understand one thing. How can have links to my declaration a lib that is not in npm package but just a .js? Indeed docs seem about npm packages only.

Currently import unityLoader = require("unity-loader"); is working but no import of UnityLoader.js... So I can't use it.

So what can we do to use a simple global library in Typescript? That issue is very important to me See here I hope you can help!

Ps: I am using Webpack to build my app.

Solution

not sure you solved the issue yet. I have it up and running. But its not as nice as it should be. And I receive errors as soon as I go to another page and then back.... but heres what I did.. My Component:

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { UnityService } from './unity.service';
declare var jQuery: any;
declare function feet(): any;
declare function water(): any;

@Component({
  moduleId: module.id,
  selector: 'sd-about',
  templateUrl: 'about.component.html',
  styleUrls: [ 'about.component.css' ]
})
export class AboutComponent implements OnInit {
  public selectedValue: string;
  public data: any;

  constructor( private http: Http, private _unity: UnityService) {
  }

  ngOnInit(): void {
    jQuery.getScript('app/about/test.js');
    jQuery.getScript('assets/Unity/UnityLoader.js');
  }

  public toggle_feet() {
    feet();
  }

  public toggle_water() {
    water();
  }

  private onError( onError: any ) {
    console.log(onError);
  }

}

test.js:

var Module = {
  TOTAL_MEMORY: 568435456,
  errorhandler: null,
  compatibilitycheck: null,
  dataUrl: "assets/WebGL/WebGL.data",
  codeUrl: "assets/WebGL/WebGL.js",
  asmUrl: "assets/WebGL/WebGL.asm.js",
  memUrl: "assets/WebGL/WebGL.mem"
};

function unity() {
  console.log("Hello from Unity")
}

function water(){
  SendMessage("Build","Toggle_Water");
}

function feet(data){
  SendMessage("Build","Toggle_Feet", data);
}

hope this helps! I'm currently trying to move everything into a service and get rid of jquery....