title: Mediainfo.js integration in Angular 8
body: <p>I'm trying to use Mediainfo.js to get some video info on the frontend of an Angular 8 project. But I'm getting the errors below:</p>
  <pre><code>GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
  wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
  falling back to ArrayBuffer instantiation
  GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
  bothg async and sync fetching of the wasm failed
  failed to asynchronously prepare wasm: RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
  RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
  ERROR Error: Uncaught (in promise): RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
  RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
  at abort (vendor.js:131481)
  at vendor.js:131481
  at ZoneDelegate.invoke (polyfills.js:3709)
  at Object.onInvoke (vendor.js:82905)
  at ZoneDelegate.invoke (polyfills.js:3708)
  at Zone.run (polyfills.js:3474)
  at polyfills.js:4205
  at ZoneDelegate.invokeTask (polyfills.js:3741)
  at Object.onInvokeTask (vendor.js:82886)
  at ZoneDelegate.invokeTask (polyfills.js:3740)
  at resolvePromise (polyfills.js:4147)
  at polyfills.js:4212
  at ZoneDelegate.invokeTask (polyfills.js:3741)
  at Object.onInvokeTask (vendor.js:82886)
  at ZoneDelegate.invokeTask (polyfills.js:3740)
  at Zone.runTask (polyfills.js:3518)
  at drainMicroTaskQueue (polyfills.js:3909)
  </code></pre>
  <p>I tried to install wasm package, but it returned lots of V8 related errors. And in it's npm page says it's Node only (<a href="https://www.npmjs.com/package/wasm" rel="nofollow noreferrer">https://www.npmjs.com/package/wasm</a>)</p>
  <p>I also checked the Webpack example (<a href="https://github.com/buzz/mediainfo.js/blob/50830088bd775942a3962416ce61f759b13bc7c2/webpack.config.js#L34" rel="nofollow noreferrer">https://github.com/buzz/mediainfo.js/blob/50830088bd775942a3962416ce61f759b13bc7c2/webpack.config.js#L34</a>)
  But it's far too different from Angular's configuration.
  I also found <a href="https://malcoded.com/posts/web-assembly-angular/" rel="nofollow noreferrer">this</a> page that shows how to use an wasm module in Angular, but I ain't got a clue on what would I put instead of the example's fibonacci function.</p>
  <p>Yet Mediainfo's page claims &quot;All analyzing is done in the browser&quot;, so it should be possible.</p>
  <p>How can I integrate Mediainfo into Angular 8 ? Any other info on this error that can help me ?</p>
  <p>Also if anyone knows how to install wasm in the frontend, it would be helpful in order for me to continue to try the integration.</p>
  <p><strong>Edit</strong></p>
  <p>I made it work, but in a very clumsy way. I imported the CDN into index.html and put</p>
  <pre><code>declare let MediaInfo: any ;
  </code></pre>
  <p>in the component.</p>
  <p>There has to be a better way than that.</p>
  <p>Also in my production environment I get these messages in the console which don't appear locally:</p>
  <pre><code>DevTools failed to load SourceMap: Could not parse content for https://assiste.estaleiro.serpro.gov.br/assets/js/mediainfo.min.js.map: Unexpected token &lt; in JSON at position 0
  wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
  falling back to ArrayBuffer instantiation
  </code></pre>
  <p>What I need is the correct integration with Angular. How do I integrate this using</p>
  <pre><code>import MediaInfo from 'mediainfo.js'
  </code></pre>
  <p>Maybe I should put some configuration in app-module or something. I just don't know where to start.</p>