3

I am working on angualar 5 app where I have to include dmn-js library which doesn't have typings available. I followed the steps outlined in angular-cli wiki on how to go about including 3rd party libraries, specifically one outlined under heading - "If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:"

This is how my code now looks like after -

src/typings.d.ts

/* SystemJS module definition */
declare var module: NodeModule;
declare module 'dmn-js';
interface NodeModule {
  id: string;
}

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import * as DmnJS from 'dmn-js';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'DMN';

  constructor(private http: HttpClient){    
  }

  ngOnInit(): void {
    var viewer = new DmnJS ({ container: 'body' });
    var dmnXML; //DMN 1.1 xml
    viewer.importXML(dmnXML, this.handleError);
  }

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

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

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

}

Now when I compile the code, I get below error. I am not sure what needs to be done to resolve the issue since I followed all steps.

ERROR in ./node_modules/dmn-js-drd/lib/Viewer.js                                                                                                                                            
Module parse failed: Unexpected token (175:4)                                                                                                                                               
You may need an appropriate loader to handle this file type.                                                                                                                                
|     additionalModules,                                                                                                                                                                    
|     canvas,                                                                                                                                                                               
|     ...additionalOptions                                                                                                                                                                  
|   } = options;                                                                                                                                                                            
|                                                                                                                                                                                           
ERROR in ./node_modules/dmn-js-shared/lib/base/Manager.js                                                                                                                                   
Module parse failed: Unexpected token (292:16)                                                                                                                                              
You may need an appropriate loader to handle this file type.                                                                                                                                
|   }                                                                                                                                                                                       
|                                                                                                                                                                                           
|   _viewsChanged = () => {                                                                                                                                                                 
|     this._emit('views.changed', {                                                                                                                                                         
|       views: this._views,                                                                                                                                                                 
ERROR in ./node_modules/dmn-js-decision-table/lib/Viewer.js                                                                                                                                 
Module parse failed: Unexpected token (75:6)                                                                                                                                                
You may need an appropriate loader to handle this file type.                                                                                                                                
|       modules,                                                                                                                                                                            
|       additionalModules,                                                                                                                                                                  
|       ...config                                                                                                                                                                           
|     } = options;                                                                                                                                                                          
|                                                                                                                                                                                           
ERROR in ./node_modules/dmn-js-literal-expression/lib/Viewer.js                                                                                                                             
Module parse failed: Unexpected token (77:6)                                                                                                                                                
You may need an appropriate loader to handle this file type.                                                                                                                                
|       modules,                                                                                                                                                                            
|       additionalModules,                                                                                                                                                                  
|       ...config                                                                                                                                                                           
|     } = options;                                                                                                                                                                          
|                                                                                                                                                                                           

webpack: Failed to compile.   
indusBull
  • 1,834
  • 5
  • 27
  • 39
  • Looks like you are using webpack but haven't told webpack to load `.js` files. – alephtwo Apr 25 '18 at 16:15
  • The problem is with loading the web pack. Maybe this link can help https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – MadaZZ Apr 25 '18 at 16:20
  • I used angular-cli to create the project. I don't see webpack.config.js created by angular-cli. The wiki doesn't let webpack know about .js files separately. I used npm install dmn-js to install libraries. – indusBull Apr 25 '18 at 16:20
  • When using angular.cli webpack settings will be hidden for you. So you can use ng eject (but read before it) or use angular-cli.json section script. There you can include javascrpt files. – Drag13 Apr 25 '18 at 18:12
  • You should address this issue to the library owner. Serving es6 code as a library is not the best practice because most of the tools / setups are excluding node_modules from compilation and angular cli is one of them. – smnbbrv Apr 30 '18 at 21:37
  • Thanks for your comment. The lib owners have addressed this here - https://forum.bpmn.io/t/using-dmn-js-with-angular-5/2057/5?u=indusbull. They also provided an node module example here that transpiles code in es2015 using babel - https://github.com/bpmn-io/dmn-js-examples/tree/master/bundling. I tried all suggestions and all turned out to be futile so far. – indusBull Apr 30 '18 at 21:43
  • Looking at your link https://github.com/bpmn-io/dmn-js-examples/blob/master/bundling/webpack.config.js - this is exactly what I was saying, they do not exclude node_modules in Babel config. – smnbbrv May 01 '18 at 05:04
  • You can simply all this by importing the dist as `import * as DmnJS from 'dmn-js/dist/dmn-viewer.development';`, see if this helps – Tarun Lalwani May 01 '18 at 07:08
  • @TarunLalwani I get an error "TypeError: DmnJs is not a constructor" – indusBull May 01 '18 at 14:25
  • The issue seems that the spread destructing is not working and the file is also js and not ts. The default tsconfig processes ts only making it to process this module didn't help as it created another error – Tarun Lalwani May 01 '18 at 14:38
  • Try to add dmn-js to your angular-cli.json. take a look at this post : https://forum.bpmn.io/t/using-dmn-js-with-angular-5/2057/2 – KLTR May 01 '18 at 17:04

1 Answers1

3

Angular-cli wiki tells how to add, as you have followed it already,now you can access the third party lib, but here dmn-js requires plugins which can support( spread operators,and other internal transforms,etc.). and dmn-js uses babel [if you observe that it is having .babelrc files in each folder of dmn* ].

In order to support the dmn-js we need to configure webpack. After spending decent amount of time here is the result :

enter image description here

In your.Component.ts

constructor(private http: HttpClient ){
    this.http.get('../assets/val.xml',{responseType: 'text'}).subscribe(x=>{
     var xml= x; // my DMN 1.1 xml
     //var myContainer = document.getElementsByClassName('canvas');
    var viewer = new Viewer({
      container: '.canvas'
    });

    viewer.importXML(xml, function(err) {
     console.log('*********************');
      if (err) {
        console.log('error rendering', err);
      } else {
        viewer
        .getActiveViewer()
        .get('canvas')
          .zoom('fit-viewport');
      }
    });
    });

In your.Component.html

<body >
<div class="canvas" style="width:100vh;height:100vh ;padding-left:100px"></div>
  </body>

In Webpack.config.js (use ng eject , if not exists) Add a rule in module -> rules

 { test: /\.js$/, 
        exclude: /node_modules\/(?!(dmn-js|dmn-js-drd|dmn-js-shared|dmn-js-decision-table|table-js|dmn-js-literal-expression|diagram-js)\/).*/,
        loader: 'babel-loader',query: {presets: ["react","es2015","stage-0"]} 

      }

In index.html add stylesheet links

  <link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-drd.css">
  <link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-decision-table.css">
  <link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-literal-expression.css">
  <link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-font/css/dmn.css">

Typings.d.ts -> you have added already !!

Install the depenencies:

npm i --save-dev babel-plugin-inferno babel-plugin-transform-object-rest-spread babel-plugin-transform-class-properties babel-plugin-transform-object-assign

Hope this helps !!!

Ref1: https://github.com/bpmn-io/dmn-js-examples/tree/master/bundling

Ref2: Error: Missing class properties transform

Ref3:https://github.com/webpack/webpack/issues/2902

Ampati Hareesh
  • 1,852
  • 1
  • 15
  • 20
  • for your reference created git repo: https://github.com/HariDongli/dmn-js-angular-stack !!! – Ampati Hareesh May 01 '18 at 20:48
  • 1
    This is great! -) Thank you very much for taking time to resolve. It is working now. I had to download additional npm dependencies to make it work - npm install --save-dev babel-loader babel-preset-stage-2 babel-preset-es2015 – indusBull May 01 '18 at 20:49
  • Thanks to you !!!, came across the babel , haven't used so far !!! you can add this to forum of dnm-js https://forum.bpmn.io/t/using-dmn-js-with-angular-5/2057/6 :) – Ampati Hareesh May 01 '18 at 20:52
  • I actually just posted ref to your solution there :-) – indusBull May 01 '18 at 20:52