Cannot read property 'appendChild' of null

Developers Modeler
1 
app.comonent.ts file
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 propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";

import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
@Component({
  selector: 'lib-bpmndemo',
  templateUrl: './bpmndemo.component.html',
  styleUrls: ['./bpmndemo.component.css']
})
export class BpmndemoComponent implements OnInit {
  modeler: Modeler;
  collapse1 = true;
  @ViewChild('canvas')
  private canvesRef: ElementRef;
  constructor(private http: HttpClient) {
  }


  ngOnInit() {
    this.modeler = new Modeler({
      container: '#canvas',
      width: '100%',
      height: '600px',
      propertiesPanel: {
        parent: '#properties'
      },
      additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    });
    this.load();
  }
  load() {
    this.getExample().subscribe(data => {
      this.modeler.importXML(data, value => this.handleError(value));
    });
    // this.modeler.on('import.done', ({error}) => {
    //   if (!error) {
    //     console.log(error,'here erro')
    //   this.modeler.get('canvas').zoom('fit-viewport');
    //   }
    //   });
  }

  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'});
  }

}
app.component.html
<p>bpmndemo works!</p>
<div class="modeler">
    <div id="canvas" #canvas></div>
    <div class="properties-panel" id="properties"></div>
</div>

getting error append child please help me why this issue is occuring

projects-iamp-btf-src-lib-iamp-btf-module.js:56321 Failed to instantiate component
(anonymous) @ projects-iamp-btf-src-lib-iamp-btf-module.js:56321
bootstrap @ projects-iamp-btf-src-lib-iamp-btf-module.js:56314
createInjector @ projects-iamp-btf-src-lib-iamp-btf-module.js:56348
Diagram @ projects-iamp-btf-src-lib-iamp-btf-module.js:56404
push…/…/node_modules/bpmn-js/lib/BaseViewer.js.BaseViewer.init @ projects-iamp-btf-src-lib-iamp-btf-module.js:31122
BaseViewer @ projects-iamp-btf-src-lib-iamp-btf-module.js:30541
BaseModeler @ projects-iamp-btf-src-lib-iamp-btf-module.js:30415
Modeler @ projects-iamp-btf-src-lib-iamp-btf-module.js:31439
push…/iamp-btf/src/lib/bpmndemo/bpmndemo.component.ts.BpmndemoComponent.ngOnInit @ projects-iamp-btf-src-lib-iamp-btf-module.js:105725
checkAndUpdateDirectiveInline @ vendor.js:96529
checkAndUpdateNodeInline @ vendor.js:104927
checkAndUpdateNode @ vendor.js:104889
debugCheckAndUpdateNode @ vendor.js:105523
debugCheckDirectivesFn @ vendor.js:105483
eval @ BpmndemoComponent_Host.ngfactory.js? [sm]:1
debugUpdateDirectives @ vendor.js:105475
checkAndUpdateView @ vendor.js:104871
callViewAction @ vendor.js:105112
execEmbeddedViewsAction @ vendor.js:105075
checkAndUpdateView @ vendor.js:104872
callViewAction @ vendor.js:105112
execEmbeddedViewsAction @ vendor.js:105075
checkAndUpdateView @ vendor.js:104872
callViewAction @ vendor.js:105112
execEmbeddedViewsAction @ vendor.js:105075
checkAndUpdateView @ vendor.js:104872
callViewAction @ vendor.js:105112
execComponentViewsAction @ vendor.js:105054
checkAndUpdateView @ vendor.js:104877
callViewAction @ vendor.js:105112
execEmbeddedViewsAction @ vendor.js:105075
checkAndUpdateView @ vendor.js:104872
callViewAction @ vendor.js:105112
execComponentViewsAction @ vendor.js:105054
checkAndUpdateView @ vendor.js:104877
callWithDebugContext @ vendor.js:105741
debugCheckAndUpdateView @ vendor.js:105443
push…/…/node_modules/@angular/core/fesm5/core.js.ViewRef.detectChanges @ vendor.js:96118
push…/…/node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ vendor.js:102541
(anonymous) @ vendor.js:102430
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.js:5737
onInvoke @ vendor.js:101688
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ polyfills.js:5736
push…/…/node_modules/zone.js/dist/zone.js.Zone.run @ polyfills.js:5496
push…/…/node_modules/@angular/core/fesm5/core.js.NgZone.run @ vendor.js:101602
next @ vendor.js:102430
schedulerFn @ vendor.js:99167
push…/…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ vendor.js:506120
push…/…/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ vendor.js:506058
push…/…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ vendor.js:506002
push…/…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ vendor.js:505979
push…/…/node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ vendor.js:505745
push…/…/node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ vendor.js:99151
checkStable @ vendor.js:101657
onHasTask @ vendor.js:101701
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ polyfills.js:5789
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ polyfills.js:5809
push…/…/node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ polyfills.js:5637
push…/…/node_modules/zone.js/dist/zone.js.Zone.runTask @ polyfills.js:5558
drainMicroTaskQueue @ polyfills.js:5947
Promise.then (async)
scheduleMicroTask @ polyfills.js:5930
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.js:5759
onScheduleTask @ polyfills.js:5647
push…/…/node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ polyfills.js:5750
push…/…/node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ polyfills.js:5584
push…/…/node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ polyfills.js:5604
scheduleResolveOrReject @ polyfills.js:6225
resolvePromise @ polyfills.js:6171
(anonymous) @ polyfills.js:6087
webpackJsonpCallback @ runtime.js:26
(anonymous) @ projects-iamp-btf-src-lib-iamp-btf-module.js:1
Show 30 more frames
projects-iamp-btf-src-lib-iamp-btf-module.js:56322 TypeError: Cannot read property ‘appendChild’ of null
at PropertiesPanel.push…/…/node_modules/bpmn-js-properties-panel/lib/PropertiesPanel.js.PropertiesPanel.attachTo (projects-iamp-btf-src-lib-iamp-btf-module.js:12767)
at PropertiesPanel.push…/…/node_modules/bpmn-js-properties-panel/lib/PropertiesPanel.js.PropertiesPanel._init (projects-iamp-btf-src-lib-iamp-btf-module.js:12741)
at new PropertiesPanel (projects-iamp-btf-src-lib-iamp-btf-module.js:12620)
at Array.instantiate (projects-iamp-btf-src-lib-iamp-btf-module.js:84344)
at Injector.get (projects-iamp-btf-src-lib-iamp-btf-module.js:84304)
at projects-iamp-btf-src-lib-iamp-btf-module.js:56319
at Array.forEach ()
at bootstrap (projects-iamp-btf-src-lib-iamp-btf-module.js:56314)
at createInjector (projects-iamp-btf-src-lib-iamp-btf-module.js:56348)
at Modeler.Diagram (projects-iamp-btf-src-lib-iamp-btf-module.js:56404)

Please help me and Thanks in advance

2

And your question is? What is all that unformatted code supposed to show?

1 Like
3

this code for bpmn daigram in angular 8 but getting error appendchild null related.

4

What does this error mean?

5

sorry but i am not able find out this issue

6

Have you tried debugging it?

7

yes this issue is resolved now

8

Can you tell us how did you this to resolve this issue ?

1 Like