ERROR TypeError: Cannot read property 'appendChild' of null

Hello,

I am trying to switch from modeler screen to viewer screen and vice versa.
Initially I am showing modeler with the html having if condition for isMonitor, if I want to show modeler isMonitor is set to false.

<div *ngIf="!isMonitor" fxFlex="100" [ngClass]="opened?'stage-show':'stage-hide'">
              <div id="canvas"></div>
            </div>

We have viewer component designed separately but used in above file with template reference. we have isMonitor flag with which it will be visible if monitor flag is set true

<div *ngIf="isMonitor" fxFlex="100" [ngClass]="opened?'stage-show':'stage-hide'">
              <app-viewer [parentapp]="ApplicationCD" [parentpro]="ProcessCD" [file_path]="file_path">
              </app-viewer>
            </div>

app-viewer component have viewer div to show viewer

Now, when initially flag is false, modeler is working fine, and when flag is set true modeler is hidden and viewer is working fine.Now the problem is when we set flag again to false, I am not able to see modeler again.
Getting the below error

ERROR TypeError: Cannot read property 'appendChild' of null
    at $f.Mo.attachTo (bpmn-modeler.production.min.js?9ba3:21)
    at $f.Mo._init (bpmn-modeler.production.min.js?9ba3:21)
    at $f.Mo (bpmn-modeler.production.min.js?9ba3:21)
    at new $f (bpmn-modeler.production.min.js?9ba3:27)
    at ProcessDesignComponent.onChildMenuItemClick (process-design.component.ts?bf74:1266)
    at Object.eval [as handleEvent] (ProcessDesignComponent.ngfactory.js:714)
    at Object.handleEvent (VM23458 core.js:29668)
    at Object.handleEvent (VM23458 core.js:30213)
    at dispatchEvent (VM23458 core.js:20288)
    at eval (VM23458 core.js:28877)
defaultErrorLogger @ VM23458 core.js:4432
ErrorHandler.handleError @ VM23458 core.js:4480
dispatchEvent @ VM23458 core.js:20292
(anonymous) @ VM23458 core.js:28877
(anonymous) @ VM23673 platform-browser.js:1089
ZoneDelegate.invokeTask @ zone.js?d135:423
onInvokeTask @ VM23458 core.js:26676
ZoneDelegate.invokeTask @ zone.js?d135:422
Zone.runTask @ zone.js?d135:195
ZoneTask.invokeTask @ zone.js?d135:498
invokeTask @ zone.js?d135:1693
globalZoneAwareCallback @ zone.js?d135:1719

When I am setting flag to false, code written in ts file is

case 'Edit': {
        console.log('selected', this.selectedItem);
        if (this.isMonitor) {
          this.modeler = new Modeler({
            container: '#canvas',
            width: '90%',
            height: '500px',
            additionalModules: [
              PropertiesPanelModule,
              OriginalPropertiesProvider,
              { [InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]] },
              // { [InjectionNames.propertiesProvider]: ['type', CustomPropsProvider] },
            ]
          });
          this.onTitleClick(this.selectedItem, false);
        }

If i don’t write the above code then I cannot see any div in browser.
All the time i have bpmn file to be showed in modeler and viewer

Thank you

your problem is using angular structural directive (*ngIF) in the following HTML code

<div *ngIf="!isMonitor" fxFlex="100" [ngClass]="opened?'stage-show':'stage-hide'">
              <div id="canvas"></div>
            </div>

“canvas” div is buried under a structural directive is the root cause of this problem. you can use ngClass technique to display and not to display “canvas” div instead of *ngIf

1 Like