MediaInfo.js with Angular 16 gives emscripten error

Question

we are trying to use mediainfo.js with angular 16 as per documentation on https://github.com/buzz/mediainfo.js.

As documented we have installed following dependencies :

Installation :

"@types/emscripten": "^1.39.7"
"mediainfo.js": "^0.2.1"

Have used the mediainfo as below :

Usage:

import MediaInfoFactory from 'mediainfo.js'
import { MediaInfo, ReadChunkFunc } from 'mediainfo.js';

fileMetdata(input: Blob) {
    MediaInfoFactory({ format: 'text' })
      .then((mi) => {
        this.getMetadata(mi, input)
          .then((info) => {
            const fileData = info.replace(/(?:\r\n|\r|\n)/g, '<br>')
            console.log(fileData);
            return fileData;
          })
          .catch((err) => {
            console.error('Failed to process file:', err)
          })
        return undefined
      })
      .catch((err) => {
        console.error('Failed to instantiate MediaInfo:', err)
      })
  }

  getMetadata(mediainfo: MediaInfo<'text'>, file: Blob): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      const getSize = () => file.size
      const readChunk: ReadChunkFunc = (chunkSize, offset) =>
        new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = (event: ProgressEvent<FileReader>) => {
            if (event.target.error) {
              reject(event.target.error)
            }
            resolve(new Uint8Array(event.target.result as ArrayBuffer))
          }
          reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
        })

      mediainfo
        .analyzeData(getSize, readChunk)
        .then((result) => {
          resolve(result)
        })
        .catch(() => {
          reject(new Error("Can't get media information"))
        })
    })
  }

But some the TS wont allow it to compile due to following errors :

Error :

Error: node_modules/mediainfo.js/dist/MediaInfoModule.d.ts:23:35 - error TS2304: Cannot find name 'EmscriptenModule'.

23 interface MediaInfoModule extends EmscriptenModule {
                                     ~~~~~~~~~~~~~~~~


Error: node_modules/mediainfo.js/dist/MediaInfoModule.d.ts:27:39 - error TS2304: Cannot find name 'EmscriptenModuleFactory'.

27 declare const mediaInfoModuleFactory: EmscriptenModuleFactory<MediaInfoModule>

Answer 1

The solution is to add type in tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["@types/emscripten"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Please refer to : https://github.com/tensorflow/tfjs/issues/3866#issuecomment-794331255