BPMN.io implementation on Angular 13 - Issue-2

Developers
1

Am implementing bpmn.io with bpmn-js-properties-panel in Angular 13;

Following are my imports;

import BpmnModeler from ‘bpmn-js/lib/Modeler’;
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from ‘bpmn-js-properties-panel’;
import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

This is my HTML;

<div #ref class="diagram-container">
    <div #canvas class="canvas" id="js-canvas"></div>
    <div class="properties-panel" id="js-properties-panel"></div>
</div>

I have this snippet of code in my .ts file;

constructor(private http : HttpClient) {
this.bpmnModeler = new BpmnModeler({
container : ‘#js-canvas’,
additionalModules : [
BpmnColorPickerModule
]
});

This results in the following run-time error in the console;
image

Note: Without the code snippet shown in bold above, the Modeler works showing the Toolbox, Diagram & the Color palette

I am unable to figure out the root cause, please help

2

I have been able to solve this - I shifted this code snippet from the constructor() to ngOnInit()

This issue may be treated as Closed.

(Shall create a separate issue for another problem I am facing)