@bpmnJS/categories-panel integrated angular

Users
1

Hi every one,
I tryed integrated bpmnjs-properties-panel in angular , but not work. this is my code
import {
Component,
OnInit,
AfterViewInit,
ViewChild,
ElementRef,
AfterContentInit,
OnDestroy,

} from ‘@angular/core’;

import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-platform/Modeler’;
import minimapModule from ‘diagram-js-minimap’;
import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
} from ‘bpmn-js-properties-panel’;

import { } from ‘camunda-bpmn-moddle/resources/camunda.json’;

@Component({
selector: ‘lib-modeler’,
templateUrl: ‘./modeler.component.html’,
styleUrls: [‘modeler.component.scss’]
})
export class ModelerComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {

@ViewChild(‘bpmn’, { static: true }) private el: ElementRef;
@ViewChild(‘pro’) properties: ElementRef;
public bpmnJS: BpmnModeler;
constructor() {

this.bpmnJS = new BpmnModeler({

  additionalModules: [
    minimapModule,
    BpmnColorPickerModule,
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
  ],

})

}

ngOnInit(): void {
fetch(‘https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn’)
.then(res => res.text())
.then((xml) => {
this.bpmnJS.importXML(xml)
})
}

ngAfterContentInit(): void {
this.bpmnJS.attachTo(this.el.nativeElement);

console.log("asdasd", this.properties)

}
ngOnDestroy(): void {
this.bpmnJS.destroy();
}

ngAfterViewInit(): void {

}

}

this is the erro apear :
modeler.component.ts:35 unhandled error in event listener TypeError: Cannot read properties of null (reading ‘appendChild’)
at BpmnPropertiesPanelRenderer.attachTo (index.esm.js:1723:15)
at index.esm.js:1687:14
at invokeFunction (EventBus.js:580:13)
at EventBus._invokeListener (EventBus.js:423:19)
at EventBus._invokeListeners (EventBus.js:397:24)
at EventBus.fire (EventBus.js:345:24)
at Modeler.Diagram (Diagram.js:157:24)
at BaseViewer._init (BaseViewer.js:654:3)
at Modeler.BaseViewer (BaseViewer.js:150:8)
at Modeler.BaseModeler (BaseModeler.js:23:3)

2

This is a duplicate of Append child of null, right? Please check my related comment on how to address this (use the browser built-in debugger to root cause your issue).

3