如何将 StropheJs 与 Angular 8 集成

Question

我尝试过的方法：

方法 1：

已从 http://strophe.im/strophejs/

strophejs-1.3.4.zip

将解压缩的文件夹，即 strophejs-1.3.4 放在我的 angular8 项目的 src/assets 文件夹中。
在我的index.html文件中包含了

<!--// Strophe.js-->
  <script src='assets/strophejs-1.3.4/src/strophe.js'></script>

我使用以下命令安装了@types/strophe：npm install --save-dev @types/strophe
然后在我的component.ts文件中声明 let Strophe: any;

按照这些步骤编译成功，但是在运行ning 上，我收到运行时间参考错误：Reference Error: Strophe is not defined

下面是我的component.ts文件

import { Component, OnInit } from '@angular/core';

declare let Strophe: any;

@Component({
  selector: 'app-oauth',
  templateUrl: './oauth.component.html',
  styleUrls: ['./oauth.component.scss']
})
export class OauthComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    const connection = new Strophe.Connection('http://localhost:5280/bosh');
    // connection.rawInput = rawInput;
    // connection.rawOutput = rawOutput;

    connection.connect('user@localhost', 'password', this.onConnect);
  }

  onConnect(status) {
    if (status == Strophe.Status.CONNECTING) {
      console.log('Strophe is connecting.');
    } else if (status == Strophe.Status.CONNFAIL) {
      console.log('Strophe failed to connect.');
    } else if (status == Strophe.Status.DISCONNECTING) {
      console.log('Strophe is disconnecting.');
    } else if (status == Strophe.Status.DISCONNECTED) {
      console.log('Strophe is disconnected.');
    } else if (status == Strophe.Status.CONNECTED) {
      console.log('Strophe is connected.');
    }
  }
}

方法二：

已安装 npm pkg strophejs（我不愿意使用它，因为它提到它已被弃用）在 https://www.npmjs.com/package/strophe

npm i strophe

然后在我的 component.ts 文件中我无法导入它。 :(

P.S There is an error(Exports and export assignments are not permitted in module augmentations.) shown in index.d.ts file of @types/strophe:

declare module "Strophe" {
   export = Strophe;
   ^^^^^^
 }

为了解决这个问题，我参考了以下内容：

- 我不明白如何在我的场景中实现它
Typescript error "An export assignment cannot be used in a module with other exported elements." while extending typescript definitions - 试过了但没用
尝试了此 https://github.com/apexcharts/apexcharts.js/issues/577 中给出的修复，但这也没有用。

Answer 1

要使用 npm 包，您应该添加到 angular.json projects>your-project-name>architect>build>options>scripts，如下所示。在JSON文件里，有点深

"scripts": [ "node_modules/jquery/dist/jquery.js",

对于像jquery这样的普通JS库，你可以将它导入到像

这样的TS文件中

import * as $ from 'jquery';

与类型和类型支持一起使用可能会很复杂。

Answer 2

使用 Strophe npm 包https://www.npmjs.com/package/strophe is deprecated, and is thus not recommended to use it. I figured out how to use the downloaded file from http://strophe.im/strophejs/

步骤如下：

导航到下载的文件夹。
然后在里面运行 npm install 这将创建一个 dist 文件夹，其中创建了两个文件和一个文件夹。
从 /dist/Strophe.umd.js 文件夹中复制 Strophe.umd.min.js 文件并将其粘贴到 angular 项目的 /assets 文件夹中。
在angular.json文件中添加此文件的路径。

"scripts": [
              "src/assets/strophe.umd.min.js"
            ]

@canbax 在他的回答中提到的路径下。

如何将 StropheJs 与 Angular 8 集成

How to integrate StropheJs with Angular 8

strophe

typescript

angular