I am getting below error
X [ERROR] TS7016: Could not find a declaration file for module ‘bpmn-js-properties-panel’. ‘C:/Users/abhishek230130/projects/bpmnv2.0/node_modules/bpmn-js-properties-panel/dist/index.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/bpmn-js-properties-panel if it exists or add a new declaration (.d.ts) file containing declare module 'bpmn-js-properties-panel'; [plugin angular-compiler]
Angular version 17
I have already installed bpmjs, bpmn-js-properties-panel from NPM
Please help to resolve this.
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";
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel';
import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone:true,
})
export class AppComponent implements OnInit {
title = 'Workflow Modeler';
modeler!: Modeler;
InitialXml =
'<?xml version="1.0" encoding="UTF-8"?>\n<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn:process id="Process_1" isExecutable="false"><bpmn:startEvent id="StartEvent_1"><bpmn:outgoing>Flow_07yodxb</bpmn:outgoing></bpmn:startEvent><bpmn:task id="Activity_1ovcun9_3" name="PreProcessing" /><bpmn:task id="Activity_0fuj9dl_8" name="Upload"><bpmn:incoming>Flow_07yodxb</bpmn:incoming></bpmn:task><bpmn:sequenceFlow id="Flow_07yodxb" sourceRef="StartEvent_1" targetRef="Activity_0fuj9dl_8" /></bpmn:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="173" y="102" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_0fuj9dl_di" bpmnElement="Activity_0fuj9dl_8"><dc:Bounds x="260" y="80" width="100" height="80" /><bpmndi:BPMNLabel /></bpmndi:BPMNShape><bpmndi:BPMNEdge id="Flow_07yodxb_di" bpmnElement="Flow_07yodxb"><di:waypoint x="209" y="120" /><di:waypoint x="260" y="120" /></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn:definitions>';
@ViewChild('canvas')
private canvesRef: ElementRef | undefined;
constructor(private http: HttpClient) {
}
ngOnInit(): void {
this.modeler = new Modeler({
container: '#canvas',
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
// CamundaPlatformPropertiesProviderModule,
// PaletteModule,
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
this.load();
}
load(): void {
this.getExample().subscribe(data => {
this.modeler.importXML(data, (value: any) => this.handleError(value));
});
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
public getExample(): Observable<string> {
const url = '/assets/bpmn/initial.bpmn'; // local
return this.http.get(url, {responseType: 'text'});
}
}