Methods I have attempted:
Method 1:
Downloaded the
strophejs-1.3.4.zipfromUnzipped the folder,
strophejs-1.3.4, and placed it in thesrc/assetsdirectory of my Angular 8 project.Included the following in my
index.htmlfile:
<!--// Strophe.js-->
<script src='assets/strophejs-1.3.4/src/strophe.js'></script>
Installed @types/strophe using the command:
npm install --save-dev @types/stropheDeclared let Strophe: any; in my component.ts file
Despite successfully compiling after these steps, when running the code, a runtime reference error is encountered:
Reference Error: Strophe is not definedBelow is the content of 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.');
}
}
}
Method 2:
Installed npm package strophejs (though hesitant due to deprecation warning) using the command
npm i strophefrom https://www.npmjs.com/package/stropheEncountered difficulty importing it in my component.ts file. :(
P.S An error (
) appeared in the index.d.ts file of @types/strophe:Exports and export assignments are not permitted in module augmentations.
declare module "Strophe" {
export = Strophe;
^^^^^^
}
To resolve this issue, I consulted the following resources:
Exports and export assignments are not permitted in module augmentations - Uncertain how to apply this solution in my case
Typescript error "An export assignment cannot be used in a module with other exported elements." while extending typescript definitions - Attempted but unsuccessful
Tried the recommended fix in this https://github.com/apexcharts/apexcharts.js/issues/577, however, it did not work either.