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

taymoor · Accepted Answer · 2018-12-18 07:16:30Z

2

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:

Go into your node_modules folder and in node_modules/ciscospark/dist/ciscospark.js
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.
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.

edited Dec 18, 2018 at 7:16

answered Dec 13, 2018 at 21:53

taymoor

212 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simplelenz Over a year ago

Thank you for the support @taymoor. Actually I am using the ciscospark browser sdk by using the bundle.js I created by following the Getting Started section in the Webex Developer website. I included the bundle.js in my angular-cli in the scripts section. Now I can access the javascript inside angular.

taymoor Over a year ago

Hey @simplenz, I actually found a better solution/workaround that doesn't require you to create a bundle manually (even though we'll be providing one really soon). I updated the original reply to reflect the newer and better information I found to assist other Angular dev's who might be facing a similar issue. I've yet to still determine what is the actual cause besides that Angular removed node builtin support. That bundle you created should work without angular or any framework really, so angular causing issues was a bit weird.

Collectives™ on Stack Overflow

Using Javascript Library in Angular

1 Answer 1

UPDATE 12/17: A Better Workaround

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE 12/17: A Better Workaround

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related