如何将StropheJs与Angular 8集成

Question

我尝试过的方法：

方法1：

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

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

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：任何;

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

方法2：

1. 已安装npm pkg strophejs（我不愿意使用它，因为它提到它已被描述）在npm i strophe

中使用命令https://www.npmjs.com/package/strophe

2. 然后在我的component.ts文件中，我无法导入它。 ：（

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

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

为了解决此问题，我引用了以下内容：

1. Exports and export assignments are not permitted in module augmentations-我不了解如何在我的方案中实现此目标

2. Typescript error "An export assignment cannot be used in a module with other exported elements." while extending typescript definitions-尝试过但没用

3. 尝试过此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，因此不建议使用它。我从http://strophe.im/strophejs/]中找出了如何使用下载的文件

步骤如下：

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

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

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

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

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

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