I have installed jointjs via npm and also installed typings and code compiles/builds fine.
Code
import { Component } from '@angular/core';
import * as joint from '../../node_modules/jointjs/dist/joint.min';
export class AppComponent {
title = 'app works!';
constructor(
) {
// console.log(joint)// private jint: joint,
}
ngOnInit() {
var graph = new joint.dia.Graph;
}
}
Error shows up on the browser:
Failed to compile.
/home/vinay/angularapps/jjs/src/app/app.component.ts (17,31): Property 'Graph' does not exist on type '{}'.)
my cli.json file.. added the scripts and styles for jointjs
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-beta.32.3",
"name": "jjs"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/jointjs/css/layout.css"
],
"scripts": ["../node_modules/jointjs/dist/joint.js"],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
my tsconfig.json file where i added allowJs to true
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2016",
"dom"
],
"mapRoot": "./",
"module": "es2015",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"allowJs": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
I am not able to figure out how to create a simple hello world application provided on this link http://resources.jointjs.com/tutorial/hello-world
ok i finally got to get jointjs working with @angular cli and below are the steps
in the command prompt within the angular project directory
Make sure in package.json the entries show up under dependencies and devDepencies for backbone, jquery, jointjs, lodash and make sure they are of the versions
jointjs 1.0.3, backbome = 1.3.3, jquery = 3.1.1, lodash = 3.10.1
in angular-cli.json file
in the styles property and scripts;[ ] property add the joint js details like below
"styles": [
"styles.css",
"../node_modules/jointjs/css/layout.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jointjs/dist/joint.js"
],
in your component.html
<div id="paper"></div>
in your component.ts
import * as jQuery from 'jquery';
import * as _ from 'lodash';
import * as $ from 'backbone';
const joint = require('../../../../node_modules/jointjs/dist/joint.js');
ngOnInit() {
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({
el: jQuery("#paper"),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
let rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
let rect2 = rect.clone() as joint.shapes.basic.Rect;
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
}