Using Javascript Library in Angular

Question

I am trying to use Cisco Webex browser SDK(ciscospark) with Angular 7.

When I ran ng serve application complies successfully but in the browser console I get the below error

Uncaught TypeError: Super expression must either be null or a function, not undefined

Can anyone help me to solve this issue?

Below is the link to the Cisco Webex browser SDK

https://developer.webex.com/docs/sdks/browser

I used npm install --save ciscospark to install the library to angular project. Below is my package.json file

{
  "name": "ng-webex-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "ciscospark": "^1.32.23",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "stream": "0.0.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.6",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

My app.component.ts file looks like below

import { Component, OnInit } from '@angular/core';
import * as ciscospark from 'ciscospark';
// import { init as initTeams } from 'ciscospark';
// import { CiscoSpark as ciscospark } from 'node_modules/@ciscospark/plugin-phone/dist/stats/filter.js';

declare global {
  interface Window { webexteams: any; }
}

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

export class AppComponent implements OnInit{
  title = 'ng-webex-test';

  ngOnInit() {
    const spark = ciscospark.init({
      credentials: {
        access_token: '*************************************'
      }
    });

    console.log(spark);
  }
}

Answer 1

I'm one of the maintainers of the Webex Teams JS SDK and we've been looking into this issue.

UPDATE 12/17: A Better Workaround

I found a better workaround that doesn't require you to modify your node_modules.

Following this article I found by @GrandSchtroumpf on Medium, that use's a combination of angular-builder's custom-webpack and dev-server packages that overwrite angular/cli's webpack config.

// webpack.config.js

module.exports = {
  node: {} // load defaults
}

So modifying the builder and serve properties in the angular.json config file allows you to run a custom webpack config. I found that creating the webpack config and leaving the node property as an empty object (which loads the defaults) above did the job fine and allowed the app to build without any errors.

The issue still comes from angular/cli version 6 with angular's removal of node builtins causing compilation/transpilation issues (which is a known issue). CodeSandbox's Angular quickstart project (which I believe uses Angular 5) showed that the SDK works fine, it's just an issue with the node builtins being removed.

---

Original Reply

At this moment we don't have a fix or a code snippet that will fix this issue. But as a temporary workaround, what I suggest you do is:

1. Go into your node_modules folder and in node_modules/ciscospark/dist/ciscospark.js
2. Comment out require('@ciscospark/plugin-phone') line.
   • This will disable plugin-phone, which was what was causing the errors and will allow the app to build successfully and the SDK to properly initialize.
3. Any time you npm install you'll need to comment out that line again.
   • This might break when it comes to CI and you'll most likely need to eject
   • If you do eject, then I suggest adding string-replace-loader and setting it up with the above fix, so you don't have to manually re-edit the file everytime you npm install

If you want the functionality of plugin-phone, you can probably get this working by modifying the webpack config and adding the necessary webpack plugins to compile missing node related modules that the browser doesn't support (like streams and process, as those errors popped up when I started debugging this issue). You can also then disregard the above workaround as well.

Currently I'm finding that it might be an issue with how Angular's boilerplate compiles/build the app. As the SDK works fine by itself as our browser samples don't use any frameworks and are just vanilla javascript. We'll be continuing looking into having better support with Angular's boilerplate so there isn't a necessity to apply the workaround or eject to use the SDK.