website logo
⌘
K
Introduction to Qualetics
Getting Started with Qualetics
Creating your account
Connecting your data
Data Streaming
Data Objects
Example Data Events & Objects
Automatic Data Capture
Custom Event Data
Error Monitoring
SDK For Data Streaming
JavaScript
Angular
React
React-Native
Rest API
Android
Qualetics for WordPress
Analytics
Activity Analytics
User Analytics
Exception Analytics
Features Overview
API Key Management
Features for Insights
Dashboards
Quick Look
User Management
User Groups
Dynamic Home Pages
Docs powered by
Archbee
SDK For Data Streaming

Angular

5min

Install the sdk with npm

Windows
|
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


Then angular.json file needs to be edited, from that file, first locate line containing

JS
|
"builder": "@angular-devkit/build-angular:browser" 


and replace it with

JS
|
"builder": "@angular-builders/custom-webpack:browser"


then inside architect.build.options add following property:

TypeScript
|
"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()
  ]
};



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"
      }
    });
  }

}





Updated 03 Mar 2023
Did this page help you?
PREVIOUS
JavaScript
NEXT
React
Docs powered by
Archbee
Docs powered by
Archbee
Copyright @ 2022 All Rights Reserved | Qualetics Data Machines Inc.