Problem encountered with HTML

[ybenarbiaBBI]

Hello everyone,

I have a problem with the displaying of my Hello world components with the free version of JointJS in my angular component HTML page.

as you can see, the code below isn't working :

So please if you've an idea in how to fix that, tell me.

Thank for your response guys !

[jamesgeorgewilliams]

Just from looking at script tags in your picture, I can see you are not using the latest version of JointJS via CDN.

The latest CDN versions can be seen in this tutorial:
https://resources.jointjs.com/tutorial/hello-world

If you have some errors in the console, it might help you debug the problem.

The following tutorial/repository shows you how to use JointJS+ with Angular, but you could create similar code using JointJS.
https://resources.jointjs.com/tutorial/angular
https://github.com/clientIO/rappid-tutorial-angular12

[jamesgeorgewilliams]

Yes, as stated above the linked repository uses JointJS+, so you need to adapt the code for JointJS.

The linked repository contains code for the PaperScroller plugin which is a JointJS+ plugin, so that is one thing you need to remove for example.

When using JointJS and Angular to follow the Hello World! tutorial, the files could look like the following:

app.component.html:

<div id="myholder"></div>

app.component.ts:

import { OnInit, Component } from '@angular/core';
import { dia, shapes } from 'jointjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private graph: dia.Graph;
  private paper: dia.Paper;

  public ngOnInit(): void {

    const namespace = shapes;

    const graph = new dia.Graph({}, { cellNamespace: namespace });;

    const paper = new dia.Paper({
      el: document.getElementById('myholder')!,
      model: graph,
      width: 600,
      height: 100,
      gridSize: 1,
      sorting: dia.Paper.sorting.APPROX,
      cellViewNamespace: namespace
    });

    const rect = new shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: 'blue'
        },
        label: {
            text: 'Hello',
            fill: 'white'
        }
    });
    rect.addTo(graph);

    const rect2 = rect.clone();
    rect2.translate(300, 0);
    rect2.attr('label/text', 'World!');
    rect2.addTo(graph);

    const link = new shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.addTo(graph);
  }
}

You still need to follow various steps in your Angular project as outlined in the tutorial.

To setup styles, add the following to angular.json:

"styles": [
     "src/styles.css",
     "node_modules/jointjs/dist/joint.css"
 ],

You will need to add some @types to the package.json as mentioned in the tutorial, and install them via npm.

"@types/backbone": "latest",
"@types/jquery": "latest",

You should also update the tsconfig.json with the following rules:

"strictPropertyInitialization": false,
"skipLibCheck": true,

I suggest studying some of our tutorials to understand everything.

It is important to understand what features are part of JointJS and JointJS+, so you can adapt the code accordingly.

[ybenarbiaBBI]

thank you, i see

i'll try to do that

so about PaperScroller plug-in did you know how to remove this one from the joint repository ?

[jamesgeorgewilliams]

Just copy & paste the above code to your Angular project in the correct files, and it should work.

The code above doesn't contain the PaperScroller plugin, because it is using the JointJS library only.

[ybenarbiaBBI]

Ok i see, thank you !

Yes I've done that but when i run the project, the terminal give me that error now :

Build at: 2022-08-11T10:04:55.483Z - Hash: 130d2eba3fb4eadc - Time: 14472ms

Warning: C:\Users\y.benarbia\testultime\node_modules\jointjs\src\mvc\index.mjs depends on 'backbone'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Users\y.benarbia\testultime\node_modules\jointjs\src\mvc\index.mjs depends on 'jquery'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Users\y.benarbia\testultime\node_modules\jointjs\src\util\util.mjs depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: Module not found: Error: Can't resolve 'C:/Users/y.benarbia/testultime/src/app/app.component.css?ngResource' in 'C:\Users\y.benarbia\testultime'

Error: The loader "C:/Users/y.benarbia/testultime/src/app/app.component.css" didn't return a string.

** Angular Live Development Server is listening on localhost:51938, open your browser on http://localhost:51938/ **

× Failed to compile.

[ybenarbiaBBI]

sorryy, i say nothing haha it's working, thank you so much for your help !!!!! i have just to replace
styleUrls: ['./app.component.css']

by :

styleUrls: ['./app.component.scss']

in my app.component.ts