WEBIX Report Manager Integration with Angular 9.1.9

Webix JS
1

Hi! Currently I have a trouble. I need to integrate Angular with Widget Report Manager. But I got unknown view:reports Error.

I followed these steps:

  1. I installed webix-pro and reports with npm i @xbs/webix-pro and npm i @xbs/reports.
  2. I added js and css bundles to angular.json. This would be:
"styles": [
              "node_modules/@xbs/reports/codebase/reports.css",
              "node_modules/@xbs/webix-pro/webix.css"
            ],
"scripts": [
              "node_modules/@xbs/reports/codebase/reports.js",
              "node_modules/@xbs/webix-pro/webix.js"
            ],
  1. I have in my component reporter.component.ts this:
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';

import * as webix from "@xbs/webix-pro";

@Component({
  selector: 'reports',
  templateUrl: './reporter.component.html'
})
export class ReporterComponent implements OnInit, OnDestroy {

  private ui : webix.ui.reports

  constructor(root: ElementRef) {

    this.ui = <webix.ui.reports> webix.ui({
      container: root.nativeElement,
      view: 'reports',
      url: "https://docs.webix.com/reports-backend/" //Here my backend
    })
  }

  ngOnInit(): void {
    this.ui.resize();
  }

  ngOnDestroy(): void {
    this.ui.destructor();
  }

}

Is this the correct way to integrate a webix external widget with Angular or is there another way?

2

probably you need to change loading order of scripts.
as reports depends on webix.

3

Hi. I already tried that and nothing

4

I’m not familiar with angular, but seems that you are loading webix and reports in global scope (<script> in html file) and using webix from imported scope import * as webix from "@xbs/webix-pro";
thus imported webix does not see report in global scope.

5

Well my friend, you are a pro. You are right, I deleted the import line and put it:

declare const webix: any

It work, because webix is in global scope. Thanks!!!

1 Like
6

Where exactly did you write the declare statement… i’m having similar issue with the @xbs/kanban

7

scratch that😅…figured it out. Thanks