angular - 如何将 StropheJs 与 Angular 8 集成

Question

我尝试过的方法：

方法1：

1. strophejs-1.3.4.zip从http://strophe.im/strophejs/下载

2. 将解压缩的文件夹，即strophejs-1.3.4在src/assets我的 angular8 项目的文件夹中。

3. 在我的index.html文件中包含

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

4. 我使用以下命令安装了@types/strophe：npm install --save-dev @types/strophe

5. 然后在我的 component.ts 文件中声明 let Strophe: any;

通过执行这些步骤，编译成功，但是在运行时，我收到运行时参考错误：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.');
    }
  }
}

方法二：

1. 使用https://www.npmjs.com/package/strophenpm i strophe中的命令安装了 npm pkg strophejs（我不愿意使用它，因为它提到它已被贬低）

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

Exports and export assignments are not permitted in module augmentations.PS @types/strophe 的 index.d.ts 文件中显示了一个错误（ ）：

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

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

1. 模块扩充中不允许导出和导出分配- 我不明白如何在我的场景中实现这一点

2. 打字稿错误“无法在具有其他导出元素的模块中使用导出分配。” 在扩展打字稿定义时-尝试过但没有用

3. 尝试了此https://github.com/apexcharts/apexcharts.js/issues/577中给出的修复，但这也不起作用。

标签： angulartypescriptstrophe

Answer 1

不推荐使用 Strophe npm 包https://www.npmjs.com/package/strophe，因此不建议使用它。我想出了如何使用从http://strophe.im/strophejs/下载的文件

步骤如下：

1. 导航到下载的文件夹。

2. 然后在其中运行 npm install 这将创建一个 dist 文件夹，其中创建了两个文件和一个文件夹。

3. Strophe.umd.min.js从文件夹中复制文件/dist/Strophe.umd.js并将其粘贴到 Angular 项目的 /assets 文件夹中。

4. 在文件中添加这个文件的路径angular.json。

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

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