No All data display in properties panel


I use Angular 7 ad I want to add modeler into this app.
Diagram display properly but in the properties panel, I see the only description of the task and nothing else.

I using these versions:

    "bpmn-js": "^4.0.3",
    "bpmn-js-properties-panel": "^0.30.0",
    "camunda-bpmn-moddle": "^3.0.0",
    "diagram-js": "^3.3.1",

Also when I want to add some listener into the task I got error ERROR

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import BpmnModeler from 'bpmn-js/lib/Modeler';

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';
  selector: 'app-hot-deployment',
  templateUrl: './hot-deployment.component.html',
  styleUrls: ['./hot-deployment.component.scss']
export class HotDeploymentComponent implements OnInit {
  constructor(private http: HttpClient) {

  ngOnInit() {
    this.modeler = new BpmnModeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      additionalModules: [
      propertiesPanel: {
        parent: '#properties'
      moddleExtension: {
        custom: camundaModdleDescriptor

  handleError(err: any) {
    if (err) {
      console.warn('Ups, error: ', err);

  load(): void {
    const url = '/assets/bpmn/initial.bpmn';
    this.http.get(url, {
      headers: {observe: 'response'}, responseType: 'text'
      (x: any) => {
        console.log('Fetched XML, now importing: ', x);
        this.modeler.importXML(x, this.handleError);

  save(): void {
    this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));

and this is my html

<button (click)="load()">Load <i class="fa fa-folder-open"></i></button>
<button (click)="save()">Save <i class="fa fa-save"></i></button>

<div class="modeler">
  <div id="canvas"></div>
  <div id="properties"></div>

And I haven’t an idea what is wrong

On attachment, the screenshot should also display Details, Asynchronous, Job configuration

Have you used inspect tool in your browser to check whether the SVG is created inside of the <div id="canvas"></div>? It looks like a CSS issue.

For Chrome, you can use this tutorial to check the above:

1 Like