1

I want to use the arborjs library for drawing graphs (I did not find the installation via npm), how can I connect it in my angular project and use it?

library code is: "src / lib / arbor"

my code if: "src/app/*.component.ts"

jQuery library is connected. She needed to work 'Arbor'

if you simply put on the html connection, and go to the localhost project, it does not work, and if you just start the html, then it works, do you have any ideas?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="../lib/arbor.js"></script>
<script src="main.js"></script> 

Graph() {   
    const sys = arbor.ParticleSystem(1000); 
    sys.parameters({gravity: true}); 
    sys.renderer = this.rendererCanvas('#viewport');
...
}

At the top of the system initialization code in the * .component.ts file.

cannot find arbor.ParticleSystem (1000)

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
miroshido
  • 36
  • 5
  • Have you imported/required `arbor` in your component like here: https://stackoverflow.com/questions/48026662/how-to-load-external-javascript-libraries-into-angular-4-components ? – barbsan Jul 18 '19 at 09:21
  • Is main.js is the bundle file (is it contains `* .component.ts` code?) – Mosh Feu Jul 18 '19 at 09:25
  • @MoshFeu main.js contains the same as in Graph () from * .component.ts – miroshido Jul 18 '19 at 09:41
  • @barbsan Yes, I meant something like that, I tried to connect via "scripts": [], but I already cursed in my browser "Cannot read property 'extend' of undefined at arbor.js: 47 ... " – miroshido Jul 18 '19 at 09:45
  • @barbsan Maybe he jquery does not have time to pick up? (jquery installed via npm and imported into * .component.ts) "import * as $ from 'jquery'" – miroshido Jul 18 '19 at 09:54
  • What about the console? Clean? Are you sure that arbor.js is loaded? (You can verify in the network tab) – Mosh Feu Jul 18 '19 at 10:27
  • @MoshFeu I think he arbor does not load, but tries to enter it, since I wrote the above error about "$ extend" – miroshido Jul 18 '19 at 10:57
  • @MoshFeu "... $ extend ..." is in the arbor plugin, it swears at it. But this method is "$ extend" from jquery. – miroshido Jul 18 '19 at 10:59
  • If you've installed jquery using npm, then why do you load it using cdn instead of some local path? (`https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js`) – barbsan Jul 18 '19 at 11:10
  • @barbsan I just tried another way to run it, but yes, it was installed via npm. – miroshido Jul 19 '19 at 04:04

1 Answers1

0

I was helped by the following. in the file 'angular.json ": 

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "src/assets/lib/arbor/lib/arbor.js"
            ]

in the file 'index.html ", which is in the project folder' src ':

 <app-root></app-root>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="assets/lib/arbor/lib/arbor.js"></script>

in the '* .component.ts' file, after the main imports:

declare var $: any;
declare var arbor: any;

I do not pretend to be the best solution, but maybe this will help someone else.

miroshido
  • 36
  • 5