I have used below code in app.component.html
<div id="canvas" #canvas></div>
<div class="properties-panel" id="properties"></div>
I have used below code in app.component.ts
import {Component, ElementRef, OnInit, ViewChild} from ‘@angular/core’;
import {HttpClient} from ‘@angular/common/http’;
import {Observable} from ‘rxjs’;
import Modeler from ‘bpmn-js/lib/Modeler.js’;
import propertiesPanelModule from ‘bpmn-js-properties-panel’;
import propertiesProviderModule from ‘bpmn-js-properties-panel/lib/provider/camunda’;
import camundaModdleDescriptor from ‘camunda-bpmn-moddle/resources/camunda.json’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent implements OnInit {
title = ‘Workflow Modeler’;
modeler: Modeler;
@ViewChild(‘canvas’)
private canvesRef: ElementRef;
constructor(private http: HttpClient) {
}
ngOnInit(): void {
this.modeler = new Modeler({
container: '#canvas',
width: '100%',
height: '600px',
propertiesPanel: {
parent: '#properties'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.load();
}
load(): void {
this.getExample().subscribe(data => {
this.modeler.importXML(data, value => this.handleError(value));
});
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
public getExample(): Observable {
const url = '/assets/bpmn/initial.bpmn'; // local
return this.http.get(url, {responseType: 'text'});
}
}
I have added the bpmn-js-properties-panel and camunda-bpmn-moddle in my angular project but still getting below error.
ERROR in src/app/app.component.ts:8:37 - error TS2732: Cannot find module ‘camunda-bpmn-moddle/resources/camunda.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension
8 import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
Kindly help.
