Error while using bpmn-js-properties-panel and camunda-bpmn-moddle in angular10 application

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’;


selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [’./app.component.css’]


export class AppComponent implements OnInit {

title = ‘Workflow Modeler’;

modeler: Modeler;


private canvesRef: ElementRef;

constructor(private http: HttpClient) {


ngOnInit(): void {

this.modeler = new Modeler({

  container: '#canvas',

  width: '100%',

  height: '600px',

  propertiesPanel: {

    parent: '#properties'


  additionalModules: [




  moddleExtensions: {

    camunda: camundaModdleDescriptor





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.

There is no problem with BPMN or its properties. you need to change your angular configuration to import JSONs. By default angular will not allow importing JSONs. Pl let me know if you need help in configuring your angular

here is an example
TSCONFIG.JSON you will find this in your angular app root folder. Change the compiler options to set resolveJsonModule to TRUE

    "compileOnSave": false,
    "compilerOptions": {
        "resolveJsonModule": true,

I am still getting the same error.

PFB the screenshot even after modifying the tsconfig.json

is this how you imported

import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

I imported as below

import camundaModdleDescriptor from “camunda-bpmn-moddle/resources/camunda.json”;

sorry… I see the import statement…

this is my whole tsconfig.json

    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./src",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
        "lib": [
        "paths": {
            "@fuse": [
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": false,
        "strictInjectionParameters": false

  1. Please make sure your project node_modules/camunda-bpmn-moddle
    (if not please use npm install --save camunda-bpmn-moddle command)

  2. Rebuild your project

The only place to configure Type script to import .json file is tsconfig.json

Please follow this link:

Pl. let me know how you are doing on this

I updated the tsconfig.json as you have provided but still getting the same issue.
Even the camunda-bpmn-moddle node_module is already installed as shown in below screenshot but still same issue.

add the following in the compiler options

"esModuleInterop": true,


  • Typescript 2.9.0 has a bug with this JSON feature, it was fixed with 2.9.2

Also, Please change your import statement

import camundaModdleDescriptor from “camunda-bpmn-moddle/resources/camunda.json”;


import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';

Still the same issue after changing the import statement in app.component.ts and adding “esModuleInterop”: true in compilerOptions in tsconfig.json.
PFB the screenshot.

it seems wired!! is your code available in github?

Its not available in github.Please suggest?

if you are OK, Please change your code on CodeSandbox ( I will fix it

Any luck on the issue?

checking now…sorry… multi tasking…

Also I referred this piece of code completely.

Hi Mallesh, Any luck further?Are you able to replicate the same issue at your end?