WEBIX Report Manager Integration with Angular 9.1.9

Question

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:

I installed webix-pro and reports with npm i @xbs/webix-pro and npm i @xbs/reports. 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"
        ],

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?

Answer 1

I already solved it. I remove:

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

and I added

declare const webix: any

webix-pro and reports .js and .css already are added in angular.json

Also, I could declare reports variable for customization Report Manager.