我正在尝试将Angular 7与Cisco Webex浏览器SDK(ciscospark)结合使用。

当我运行ng serve应用程序成功符合要求,但是在浏览器控制台中,出现以下错误


  未捕获的TypeError:超级表达式必须为null或函数,且未定义


javascript - 在Angular中使用Javascript库-LMLPHP

谁能帮我解决这个问题?

以下是指向Cisco Webex浏览器SDK的链接

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

我使用npm install --save ciscospark将库安装到angular项目。以下是我的package.json文件

{
  "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"
  }
}


我的app.component.ts文件如下所示

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

最佳答案

我是Webex Teams JS SDK的维护者之一,我们一直在研究此问题。

更新12/17:更好的解决方法

我发现了一个更好的解决方法,它不需要您修改node_modules。

我在article发现的@GrandSchtroumpf on Medium之后,使用了angular-builder的custom-webpackdev-server包的组合,这些包会覆盖angular/cli的webpack配置。

// webpack.config.js

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


因此,修改angular.json配置文件中的构建器和服务属性可让您运行自定义Webpack配置。我发现创建webpack配置并将上述node属性保留为空对象(加载默认值)可以很好地完成工作,并允许应用程序构建而不会出现任何错误。

该问题仍然来自angular/cli版本6,其中angular删除了节点内建节点,从而导致编译/转译问题(这是一个已知问题)。 CodeSandbox's Angular quickstart project(我相信使用Angular 5)表明SDK可以正常工作,这只是删除了节点内置的问题。



原始回复

目前,我们没有可解决此问题的修复程序或代码片段。但是,作为临时的解决方法,我建议您执行以下操作:


进入您的node_modules文件夹,然后进入node_modules/ciscospark/dist/ciscospark.js
注释掉require('@ciscospark/plugin-phone')行。


这将禁用导致错误的plugin-phone,并允许应用程序成功构建和SDK正确初始化。

每当您npm install时,您都需要再次注释该行。


对于CI,这可能会中断,您很可能需要弹出
如果确实弹出,则建议添加string-replace-loader并使用上述修复程序对其进行设置,因此您不必在每次npm安装时都手动重新编辑该文件。



如果您需要plugin-phone的功能,则可以通过修改webpack配置并添加必要的webpack插件来编译浏览器不支持的缺少的节点相关模块(例如流和进程,因为这些错误会弹出)来使此功能正常工作当我开始调试此问题时)。然后,您也可以不考虑上述解决方法。

目前,我发现Angular的样板如何编译/构建应用程序可能是一个问题。由于SDK本身可以很好地工作,因为我们的browser samples不使用任何框架,而只是普通的javascript。我们将继续寻求对Angular样板的更好支持,因此无需应用替代方法或弹出使用SDK。

09-17 10:02
查看更多