- Создан новый проект Angular 9 с одним компонентом:
import { Component, OnInit } from '@angular/core';
import * as dagre from 'dagre';
import * as graphlib from 'graphlib';
import * as joint from 'jointjs';
@Component({
selector: 'app-diagram',
templateUrl: './diagram.component.html',
styleUrls: ['./diagram.component.scss']
})
export class DiagramComponent implements OnInit {
constructor() { }
ngOnInit(): void {
const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({
el: document.getElementById('my-holder'),
model: graph,
width: 600,
height: 100,
gridSize: 1,
background: { color: 'cornflowerblue'}
});
joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
attrs: {
body: {
rx: 10, // add a corner radius
ry: 10,
strokeWidth: 1,
fill: 'cornflowerblue'
},
label: {
textAnchor: 'left', // align text to left
refX: 10, // offset text from right edge of model bbox
fill: 'white',
fontSize: 18,
text: 'Hello'
}
}
}, {
// inherit joint.shapes.standard.Rectangle.markup
}, {
create() {
const rectangle = new this();
rectangle.resize(250, 50);
return rectangle;
}
});
const customRect = (joint.shapes as any).examples.CustomRectangle.create();
customRect.addTo(graph);
}
}
2. Установить зависимости:
"backbone": "^1.4.0",
"dagre": "^0.8.5",
"jointjs": "^3.0.3",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
Запустить приложение. Ожидаем увидеть customRect. Chrome консоль показывает ошибку:
ERROR TypeError: Cannot read property 'CustomRectangle' of undefined
at DiagramComponent.ngOnInit (VM10 main.js:237)
at callHook (VM11 vendor.js:11079)
at callHooks (VM11 vendor.js:11043)
at executeInitAndCheckHooks (VM11 vendor.js:10983)
at refreshView (VM11 vendor.js:17422)
at refreshComponent (VM11 vendor.js:18842)
at refreshChildComponents (VM11 vendor.js:17133)
at refreshView (VM11 vendor.js:17456)
at renderComponentOrTemplate (VM11 vendor.js:17530)
at tickRootContext (VM11 vendor.js:19004)
Похоже, что настраиваемый прямоугольник не создан. Но возвращаясь к совместной js версии 2.2.1 без каких-либо изменений кода, все работает нормально. Ошибка отображается с любым соединением js версия> = 3.0.0