How to integrate StropheJs with Angular 8

Question

Approaches that I have tried:

Approach 1:

1. Downloaded the strophejs-1.3.4.zip from http://strophe.im/strophejs/

2. Placed the unzipped folder i.e., strophejs-1.3.4 in src/assets folder in my angular8 project.

3. In my index.html file have included

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

4. I installed @types/strophe using the command : npm install --save-dev @types/strophe

5. Then in my component.ts file declare let Strophe: any;

By following these steps the compilation is sucessful, however on running, I am getting run time reference error: Reference Error: Strophe is not defined

Below is my component.ts file

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.');
    }
  }
}

Approach 2:

1. Installed npm pkg strophejs (I was reluctant on using it, as it mentions it is depricated) using the command npm i strophe in https://www.npmjs.com/package/strophe

2. Then in my component.ts file I am unable to import it. :(

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;
   ^^^^^^
 }

To Solve this issue I've referred the following:

1. Exports and export assignments are not permitted in module augmentations - I didn't understand how I can implement this in my scenario

2. Typescript error "An export assignment cannot be used in a module with other exported elements." while extending typescript definitions - Tried this but didn't work

3. Tried the fix given in this https://github.com/apexcharts/apexcharts.js/issues/577, but this too didn't work.

Answer 1

Using the Strophe npm package 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/

Steps are as follows:

1. Navigate to the downloaded folder.

2. Then in it run npm install This creates a dist folder in which two files and a folder is created.

3. Copy the Strophe.umd.min.js file from the /dist/Strophe.umd.js folder and paste it in the /assets folder of your angular project.

4. Add the path of this file in angular.json file.

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

under the path mentioned by @canbax in his answer.

Answer 2

To use npm package you should add to angular.json projects>your-project-name>architect>build>options>scripts like below. In the JSON file, it is a bit deep.

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

for ordinary JS library like jquery you can import it inside a TS file like

import * as $ from 'jquery';

Using together with types and typing support might be complicated.