Palette and other editing toold from modeler are missing/not showing up

Hi, I’m using BPMN-JS on an Angular project from the Clean UI template.

I’ve got the demo and I have it working on a simple angular project, but when transferring it to my Clean UI project there are things missing


If the picture is showing, I’ve got no palette, and the mini options that allow for things like adding panels is also missing, I can only edit text, adjust the lines, and that’s it
Also, it’s not picking the full height, it’s just the minimium to hold what the XML says.

It’s got me weirded out because the code is basically the same, same imports and set up.


The only thing that comes to mind here is that the Clean UI template might have something to do with it, but I have found nothing so far that comes in their way.

Any idea on what I might be missing?, I’ll add my code here

import { Component, OnInit, ElementRef, EventEmitter, Output, ViewChild, Input, SimpleChanges, AfterContentInit, OnDestroy, OnChanges } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, catchError, retry } from 'rxjs/operators';

 * You may include a different variant of BpmnJS:
 * bpmn-viewer  - displays BPMN diagrams without the ability
 *                to navigate them
 * bpmn-modeler - bootstraps a full-fledged BPMN editor
import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
import bpmnPaletteModule from 'bpmn-js/lib/features/palette';

import { importDiagram } from './rx';

import { throwError } from 'rxjs';

// declare var require:any
// const datas:any = require('./diagram.bpmn')
  selector: 'app-diagram',
  templateUrl: './modeler.component.html',
  styleUrls: ['./modeler.component.scss']
export class DiagramComponent implements AfterContentInit, OnChanges, OnDestroy {
  private bpmnJS: BpmnJS;

  @ViewChild('ref') private el: ElementRef;
  @Output() private importDone: EventEmitter<any> = new EventEmitter();

  @Input() private url: string;

  constructor(private http: HttpClient) {

    this.bpmnJS = new BpmnJS();

    this.bpmnJS.on('import.done', ({ error }) => {
      if (!error) {

  ngAfterContentInit(): void {

  ngOnChanges(changes: SimpleChanges) {
    // re-import whenever the url changes
    if (changes.url) {

  ngOnDestroy(): void {

   * Load diagram from URL and emit completion event
  loadUrl(url: string) {
    return (
      this.http.get(url, { responseType: 'text' }).pipe(
        catchError(err => throwError(err)),
        (warnings) => {
            type: 'success',
        (err) => {
            type: 'error',
            error: err

    <div class="diagram-parent">
      <app-diagram [url]="diagramUrl" (importDone)="handleImported($event)"></app-diagram>
    <div class="import-error" *ngIf="importError">
      <strong>Failed to render diagram: </strong>
      {{ importError.message }}
  styles: [`
    .diagram-parent {
      height: 800px;
      border: solid 3px #EEE;
      position: relative;
export class ModelerWrapperComponent{
  diagramUrl = 'assets/diagram.bpmn';
  importError?: Error;

  handleImported(event) {

    const {
    } = event;

    if (type === 'success') {
      console.log(`Rendered diagram (%s warnings)`, warnings.length);

    if (type === 'error') {
      console.error('Failed to render diagram', error);

    this.importError = error;

Ah, I was supossed to upload this instead