Angular

5min
Install the sdk with npm
Windows
|
npm install --save @deerden/qualeticssdk;
npm install --save @deerden/qualeticssdk;
﻿
Since webpack 5 no longer includes polyfills for the node.js core modules, they need to be added to webpack configuration.
This is done by first installing @angular-builders/custom-webpack and node-polyfill-webpack-plugin packages
Windows
|
npm install --save-dev @angular-builders/custom-webpack
npm install --save-dev node-polyfill-webpack-plugin
npm install --save-dev @angular-builders/custom-webpack
npm install --save-dev node-polyfill-webpack-plugin
﻿
Then angular.json file needs to be edited, from that file, first locate line containing 
JS
|
"builder": "@angular-devkit/build-angular:browser" 
"builder": "@angular-devkit/build-angular:browser" 
﻿
and replace it with 
JS
|
"builder": "@angular-builders/custom-webpack:browser"
"builder": "@angular-builders/custom-webpack:browser"
﻿
then inside architect.build.options add following property:
TypeScript
|
"customWebpackConfig": {
  "path": "./custom-webpack.config.js"
},
"customWebpackConfig": {
  "path": "./custom-webpack.config.js"
},
﻿
to have the custom webpack configuration to be used also by the development server, locale also following line 
"builder": "@angular-devkit/build:dev-server" 
and replace it with
"builder": "@angular-builders/custom-webpack:dev-server"
next create a file called custom-webpack.config.js and addi it to the project root. After creating the file, add the following content to that file:
TypeScript
|
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
  plugins: [
    new NodePolyfillPlugin()
  ]
};

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
  plugins: [
    new NodePolyfillPlugin()
  ]
};
﻿
Now SDK should work in Angular module:
TypeScript
|
import { Component } from '@angular/core';
import { QualeticsService } from "@deerden/qualeticssdk";

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  applicationId = "APPLICATION_ID";
  applicationSecret = "APPLICATION_SECRET";
  clientId = "Client_ID";

  qualetics = new QualeticsService(this.applicationId, this.applicationSecret, this.clientId, true, {
    host:'wss://api.qualetics.com',
    port:443,
    appVersion: "1.0.0"
  });

  ngOnInit() {
    this.qualetics.init();
  }

  sendMessage() {
    this.qualetics.send({
      "actor": {
        "type": "User",
        "id": "js1234"
      },
      "action": {
        "type": "ButtonClick"
      },
      "context": {
        "type": "Button",
        "name": "Button1"
      }
    });
  }

}

import { Component } from '@angular/core';
import { QualeticsService } from "@deerden/qualeticssdk";

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  applicationId = "APPLICATION_ID";
  applicationSecret = "APPLICATION_SECRET";
  clientId = "Client_ID";

  qualetics = new QualeticsService(this.applicationId, this.applicationSecret, this.clientId, true, {
    host:'wss://api.qualetics.com',
    port:443,
    appVersion: "1.0.0"
  });

  ngOnInit() {
    this.qualetics.init();
  }

  sendMessage() {
    this.qualetics.send({
      "actor": {
        "type": "User",
        "id": "js1234"
      },
      "action": {
        "type": "ButtonClick"
      },
      "context": {
        "type": "Button",
        "name": "Button1"
      }
    });
  }

}
﻿
﻿
Updated 03 Mar 2023
Did this page help you?