我正在尝试将Angular 7与Cisco Webex浏览器SDK(ciscospark)结合使用。
当我运行ng serve
应用程序成功符合要求,但是在浏览器控制台中,出现以下错误
未捕获的TypeError:超级表达式必须为null或函数,且未定义
谁能帮我解决这个问题?
以下是指向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-webpack和dev-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。