React error for Angular integration

[vitaly-t]

I have followed exactly the example for Angular 6/7 here, and I ended up with this error in the browser:

Error: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
    at i (qdt-components.js:1)
    at i (qdt-components.js:19)
    at et (qdt-components.js:19)
    at qdt-components.js:19
    at s (qdt-components.js:19)
    at u (qdt-components.js:19)
    at beginWork (qdt-components.js:19)
    at o (qdt-components.js:19)
    at a (qdt-components.js:19)
    at x (qdt-components.js:19)

which happens here:

  ngOnInit() {
    qdtComponent.render(this.type, this.props, this.elementRef.nativeElement);
  }

What am I missing? Why is it complaining about React for an Angular application?

Currently, I am using:

• qdt-components v1.3.13
• Angular CLI 7.0.4
• Angular 7.0.2
• Windows 10, 64-bit.

[vitaly-t]

UPDATE

Having downgraded to Angular 6 made absolutely no difference, the exact same error pops up.

[yianni-ververis]

This is with Angular 6 and qdt-components 1.3.13 https://webapps.qlik.com/qdt-components/angular/index.html#/

[yianni-ververis]

You can compare here https://github.com/qlik-demo-team/qdt-angular-template/tree/master/src

[vitaly-t]

I have done it, and now it works!

What I can't understand - why the demo application is so different in many ways. The way that integration with Angular 6 is documented in fact explains nothing, it is completely useless.

I had to go through the demo to figure out how it works.

[yianni-ververis]

@vitaly-t Sorry about that. I am trying to keep up with all of the templates and examples that we have out there. Thank you for your contribution.

[parasdedhia]

@vitaly-t - I am facing the same issue, even after downgrading it to Angular 6, could you please tell me how did you make it work?

[vitaly-t]

@parasdedhia I didn't, I gave up and went the IFRAME way, sadly.

[tgwhite]

@yianni-ververis I'm running into the same react error with Angular 9. Do you have a sense of what causes this?

[yianni-ververis]

OK, I went through the CLI again with the latest Angular and i had no issues

[yianni-ververis]

app.component.ts

import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent {

viz1 = {
    type: 'QdtSelectionToolbar',
    props: {
        type: 'QdtSelectionToolbar', height: '300px',
    },

};

viz2 = {
    type: 'QdtViz',
    props: {
  type: 'barchart',
  id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398',
  height: '300px',
  exportData: true,
  exportImg: true,
  exportImgOptions: { width: 600, height: 400, format: 'JPG' },
  exportPdf: true,
  exportPdfOptions: { documentSize: { width: 300, height: 150 } },
    },

};

title = 'my-app'; }

[yianni-ververis]

app.component.html

<qdt-components [Component]="viz1.type" [props]="viz1.props"> <qdt-components [Component]="viz2.type" [props]="viz2.props">

[yianni-ververis]

qdt-component.component.ts

import { Component, OnInit, ElementRef, Input } from '@angular/core'; import QdtComponents from 'qdt-components';

const qConfig = { "config": { "host": "xxxxxx.com", "secure": true, "port": 443, "prefix": "", "appId": "1xxxxxxx-xxxx-xxxx-xxxxx" }, "connections": { "vizApi": true, "engineApi": true } }

@Component({ selector: 'qdt-components', templateUrl: './qdt-components.component.html', styleUrls: ['./qdt-components.component.less'] }) export class QdtComponentsComponent implements OnInit {

@Input() Component: string;

@Input() props: object;

static qdtComponent = new QdtComponents(qConfig.config, qConfig.connections);

constructor(private elementRef: ElementRef) { }

ngOnInit() { QdtComponentsComponent.qdtComponent.render(this.Component, this.props, this.elementRef.nativeElement); }

}

[yianni-ververis]

package.json

"dependencies": { "@angular/animations": "~8.2.14", "@angular/common": "~8.2.14", "@angular/compiler": "~8.2.14", "@angular/core": "~8.2.14", "@angular/forms": "~8.2.14", "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "qdt-components": "^2.3.8", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" },

[yianni-ververis]

Can you share your code with the component and the props? You maybe passing some wrong props

[tgwhite]

@yianni-ververis We figured it out -- this error occurred when calling the wrong component type ("barchart") instead of "QdtViz".

I wonder if there is a way to drop some warnings to people about that?

Also, if you have a moment, how does one go about building this locally? I'd like to expose the qlik global API in addition to the app API via qAppPromise.

[yianni-ververis]

const qDoc = await qdtComponents.qDocPromise;
const qObject = await qDoc.createSessionObject(qProp);
const qData = await qObject.getHyperCubeTreeData('/qTreeDataDef');

[yianni-ververis]

Good news @tgwhite