Import a javascript library into a custom javascript file which I use in my Angular2 project

Question

I want to include Machine Learning in my Angular2 project through the "synaptic.js" library of JavaScript. I have installed the library through the command

npm install synaptic --save

I want to run the following custom javascript file (myJsFile.js):

function myFunction() {
   var A = new Layer(5);
   var B = new Layer(2);
   A.project(B);

   var learningRate = .3;

   for (var i = 0; i < 20000; i++)
   {
      // when A activates [1, 0, 1, 0, 1]
      A.activate([1,0,1,0,1]);

      // train B to activate [0,0]
      B.activate();
      B.propagate(learningRate, [0,0]);
   }

   // test it
   A.activate([1,0,1,0,1]);
   console.log(B.activate()); // [0.004606949693864496,0.004606763721459169]
}

In my index.html file, I have included the following code:

<script src="js/myJsFile.js"></script>

In my app.component.ts file

import { Component, OnInit }      from '@angular/core';
import { Router }                 from '@angular/router';
import { AuthenticationService }  from '../../Services/authentication.service';
declare var myFunction: any;

@Component({
  moduleId:     module.id,
  selector:     'my-app',
  templateUrl:  './app.component.html',
  styleUrls:    [ './app.component.css' ]
})

export class AppComponent implements OnInit {
    // some code here

    // I call f() function inside the app.component.html file in order to run the myFunction() javascript function. 
    f() {
       new myFunction();
    }

If, for example, the alert() function was inside the myJsFile.js file, the code would run without any problem. But in my case, I have the following error:

app.component.html:9 ERROR ReferenceError: Layer is not defined

It means that I have to import the synaptic library somewhere. The usage section in github (https://github.com/cazala/synaptic) points out the following:

var synaptic = require('synaptic'); // this line is not needed in the browser
var Neuron = synaptic.Neuron,
    Layer = synaptic.Layer,
    Network = synaptic.Network,
    Trainer = synaptic.Trainer,
    Architect = synaptic.Architect;

If I import the above code into my myJsFile.js, I get the following error:

myJsFile.js:1 Uncaught ReferenceError: require is not defined

Where should I import the synaptic library and how??

I have also found and installed the synaptic.d.ts file, but I don't know how to use it.. Can anyone help me??

Thanks a lot for your time!

Answer 1

The example you have is probably using Node, for using with Angular 2+ you need to use the import syntax.

e.g.

import { Neuron, Layer, Network, Trainer, Architect} from 'synaptic';

Then you can should be able to reference them

Also I would suggest making your myJsFile.js file a ts file and importing the same way. It's just less complicated if everything is imported in js and not in the html.