Parsing XML in typescript
<p>Using Typescript 2.0 (tsc version 2.0.3).</p>

<p>I have unsuccessfully attempted to use the xml2js node library inside an angular2/typescript application (see <a href="https://www.npmjs.com/package/xml2js" rel="noreferrer">https://www.npmjs.com/package/xml2js</a>). Seems clear I am not familiar enough with the way the SystemJS sets up the library for consumption.</p>

<p>To install the xml2js library I did the following:</p>

<pre><code>npm install --save xml2js
npm install --save @types/xml2js
</code></pre>

<p>Here are the relevant files:</p>

<p>tsconfig.json:</p>

<pre><code>{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir" : "build"
  }
}
</code></pre>

<p>systemjs.config.js</p>

<pre><code>/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'build',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'lodash' : 'npm:lodash',
      'xml2js' : 'npm:xml2js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      lodash: {
        main : 'index.js',
        defaultExtension: 'js'
      },
      xml2js: {
        defaultExtension: 'js'
      }
    }
  });
})(this);
</code></pre>

<p>The consuming file:</p>

<pre><code>import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';
import * as _ from 'lodash';
import * as xml2js from 'xml2js';
@Injectable()
export class CatalogService {
  constructor (private http:Http) {
  }
  getCatalog() {
    //return Promise.resolve(['This', 'That']);
    var xml = "&lt;root&gt;Hello xml2js!&lt;/root&gt;"
    xml2js.parseString(xml, function (err, result) {
      alert(result);
    });

    alert(_.indexOf([1, 2, 1, 2], 2));

  }
}
</code></pre>

<p>index.html file</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Angular QuickStart&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;!-- 1. Load libraries --&gt;
     &lt;!-- Polyfill for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;dsa-app&gt;Loading DSA App...&lt;/dsa-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>With that setup, I do get an error as follows:</p>

<p>zone.js:1382 GET <a href="http://localhost:3000/node_modules/xml2js/" rel="noreferrer">http://localhost:3000/node_modules/xml2js/</a> 404 (Not Found)</p>

<p>The lodash library loads fine, so I am pretty sure the issue here has to do with the way the xml2js library is defined more than my setup.</p>

<p>Closest solution I have seen for this is a bit dated for Angular 2.0, but I put it here for reference: <a href="https://stackoverflow.com/questions/38720871/use-js-library-xml2js-with-angular-2">Use JS library xml2js with Angular 2</a></p>

<p>Although the question specifically addresses using that library, any other ideas on how to parse/convert xml into something manageable inside TypeScript would also come in handy.</p>

<hr>

<p><strong>Update</strong>:</p>

<p>As suggested I started adding "main" definitions to my systemjs configuration. However, I though part of this was that the dependencies would be loaded/figured out from the node content.</p>

<p>Thus modifying the system.config.js to have:</p>

<pre><code>  xml2js: {
    main: 'lib/xml2js.js', 
    defaultExtension: 'js'
  },
</code></pre>

<p>Move the issue to where now I get 404 entries for sax and xmlbuilder.</p>

<p>Thus, I added the following too:</p>

<pre><code>  sax: {
    main: 'lib/sax.js',
    defaultExtension: 'js'        
  },
  xmlbuilder: {
    main: 'lib/index.js', 
    defaultExtension: 'js'        
  }
</code></pre>

<p>Which address the sax and xmlbuilder, but then more errors popup.</p>

<p>I thought the whole idea with using the SystemJS and the tsconfig would be that these would be figured out from the node modules, adding all the tree dependencies on the packages seems to defeat the purpose. </p>