javascript - 在 Angular 中使用 Javascript 库

Question

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

当我运行 ngserve 应用程序成功合规，但在浏览器控制台中出现以下错误

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

谁能帮我解决这个问题吗？

以下是 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);
  }
}

Answer 1

我是 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 配置并将节点属性保留为空对象(加载默认值)上面的工作很好，并且允许应用程序构建而不会出现任何错误。

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

<小时/>

原始回复

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

1. 进入 node_modules 文件夹和 node_modules/ciscospark/dist/ciscospark.js
2. 注释掉 require('@ciscospark/plugin-phone') 行。
   • 这将禁用导致错误的plugin-phone，并允许应用成功构建以及 SDK 正确初始化。
3. 任何时候 npm install 都需要再次注释掉该行。
   • 当涉及到 CI 时，这可能会失败，并且您很可能需要弹出
   • 如果您确实弹出，那么我建议添加 string-replace-loader并使用上述修复进行设置，这样您就不必在每次 npm install 时手动重新编辑文件

如果您想要 plugin-phone 的功能，您可以通过修改 webpack 配置并添加必要的 webpack 插件来编译浏览器不支持的缺失节点相关模块来实现此功能(就像流和进程一样，当我开始调试这个问题时就会弹出这些错误)。您也可以忽略上述解决方法。

目前我发现这可能是 Angular 的样板编译/构建应用程序的方式存在问题。由于 SDK 本身可以正常工作，如我们的 browser samples不使用任何框架，只是普通的 JavaScript。我们将继续研究如何更好地支持 Angular 的样板，因此无需应用解决方法或弹出即可使用 SDK。