如何將 StropheJs 與 Angular 8 集成

Question

我嘗試過的方法：

方法一：

1. 從http://strophe.im/strophejs/下載了strophejs-1.3.4.zip

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: 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/strophe 中的命令npm i strophe安裝了 npm pkg strophejs（我不願意使用它，因為它提到它已被npm i strophe ）

2. 然后在我的 component.ts 文件中，我無法導入它。 :(

PS @types/strophe 的 index.d.ts 文件中顯示錯誤（ Exports and export assignments are not permitted in module augmentations. ）：

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

為了解決這個問題，我參考了以下內容：

1. 模塊擴充中不允許導出和導出分配- 我不明白如何在我的場景中實現這一點

2. 打字稿錯誤“不能在具有其他導出元素的模塊中使用導出分配。” 在擴展打字稿定義時- 嘗試過但沒有用

3. 嘗試了此https://github.com/apexcharts/apexcharts.js/issues/577 中給出的修復程序，但這也不起作用。

Answer 1

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

步驟如下：

1. 導航到下載的文件夾。

2. 然后在其中運行 npm install 這將創建一個 dist 文件夾，其中創建了兩個文件和一個文件夾。

3. 從/dist/Strophe.umd.js文件夾復制Strophe.umd.min.js文件並將其粘貼到 angular 項目的 /assets 文件夾中。

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

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

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

Answer 2

要使用 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';

與類型和類型支持一起使用可能會很復雜。