title: How to integrate StropheJs with Angular 8
body: <p>Approaches that I have tried:</p>
  
  <p><strong>Approach 1</strong>: </p>
  
  <ol>
  <li><p>Downloaded the <code>strophejs-1.3.4.zip</code> from <a href="http://strophe.im/strophejs/" rel="nofollow noreferrer">http://strophe.im/strophejs/</a></p></li>
  <li><p>Placed the unzipped folder i.e., <code>strophejs-1.3.4</code> in <code>src/assets</code> folder in my angular8 project.</p></li>
  <li><p>In my <code>index.html</code> file have included</p></li>
  </ol>
  
  <pre><code>&lt;!--// Strophe.js--&gt;
    &lt;script src='assets/strophejs-1.3.4/src/strophe.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <ol start="4">
  <li><p>I installed @types/strophe using the command : <code>npm install --save-dev @types/strophe</code></p></li>
  <li><p>Then in my component.ts file
  declare let Strophe: any;</p></li>
  </ol>
  
  <p>By following these steps the compilation is sucessful, however on running, I am getting run time reference error: <code>Reference Error: Strophe is not defined</code> </p>
  
  <p>Below is my component.ts file</p>
  
  <pre><code>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.');
      }
    }
  }
  </code></pre>
  
  <p><strong>Approach 2:</strong></p>
  
  <ol>
  <li><p>Installed npm pkg strophejs (I was reluctant on using it, as it mentions it is depricated)
  using the command <code>npm i strophe</code> in <a href="https://www.npmjs.com/package/strophe" rel="nofollow noreferrer">https://www.npmjs.com/package/strophe</a></p></li>
  <li><p>Then in my component.ts file I am unable to import it. :(</p></li>
  </ol>
  
  <blockquote>
    <p>P.S There is an error(<code>Exports and export assignments are not permitted in module augmentations.</code>) shown in index.d.ts file of @types/strophe:</p>
  </blockquote>
  
  <pre><code>declare module "Strophe" {
     export = Strophe;
     ^^^^^^
   }
  </code></pre>
  
  <p>To Solve this issue I've referred the following:</p>
  
  <ol>
  <li><p><a href="https://stackoverflow.com/questions/53186841/exports-and-export-assignments-are-not-permitted-in-module-augmentations">Exports and export assignments are not permitted in module augmentations</a> - I didn't understand how I can implement this in my scenario</p></li>
  <li><p><a href="https://stackoverflow.com/questions/48708410/typescript-error-an-export-assignment-cannot-be-used-in-a-module-with-other-exp">Typescript error &quot;An export assignment cannot be used in a module with other exported elements.&quot; while extending typescript definitions</a> - Tried this but didn't work</p></li>
  <li><p>Tried the fix given in this <a href="https://github.com/apexcharts/apexcharts.js/issues/577" rel="nofollow noreferrer">https://github.com/apexcharts/apexcharts.js/issues/577</a>, but this too didn't work.</p></li>
  </ol>