Setup Angular 6 with music-metadata-browser

[Borewit]

Replacement of issue Borewit/music-metadata#163 from @bfromager:

V3.1.6
Trying to use music-metadata.parseFile() under Ionic 4/Angular 6

Got the following errors:
ERROR in ./node_modules/strtok3/lib/FsPromise.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\strtok3\lib'
ERROR in ./node_modules/music-metadata/lib/index.js
Module not found: Error: Can't resolve 'path' in '...\node_modules\music-metadata\lib'
ERROR in ./node_modules/music-metadata/lib/aiff/AiffParser.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\aiff'
ERROR in ./node_modules/music-metadata/lib/riff/RiffParser.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\riff'

Not sure if i'm doing something wrong

[Borewit]

For music-metadata parsing, on the browser side, you better use this npm. That will get rid of the fs dependency.

But, there are some things you have to take care of, due to some Node specific dependencies which needs to be poly-filled:

Using Angular 6 you need to polyfill stream & assert in your tsconfig.json:

    "paths": {
      "stream": [ "node_modules/readable-stream" ],
      "assert": [ "node_modules/assert" ]

    }

An example can be found in audio-tag-analyzer.

Not so many projects are using music-metadata-browser @bfromager, so I am looking forward to hear if things work out for you.

[bfromager]

Thx for your quick reply.
Unfortunately, polyfills did'nt seem to have any effect (i tried with and without in both tsconfig.json and src/tsconfig?app.json) with the same errors:
[ng] ERROR in ./node_modules/music-metadata-browser/dist/fetch/Browser2NodeStream.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata-browser\dist\fetch'
[ng] ERROR in ./node_modules/music-metadata/lib/aiff/AiffParser.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\aiff'
[ng] ERROR in ./node_modules/music-metadata/lib/riff/RiffParser.js
[ng] Module not found: Error: Can't resolve 'stream' in '...\node_modules\music-metadata\lib\riff'

[Borewit]

Did you add stream-readable and assert as dependencies to your project?

You basically tell the TypeScript compilere where to look for the stream & assert dependency.

Compare your project with the audio-tag-analyzer. I

If you tell me where to find it I can have a look to your code.

[wulfsberg]

Since I just ran into this:
You need to

npm i assert buffer process readable-stream

and then polyfill some globals in polyfill.ts:

import * as process from 'process';
(window as any).process = process;
(window as any).global = window;
import * as _buffer from 'buffer';
(window as any).Buffer = _buffer.Buffer;

in addition to the paths setup described above.

[Borewit]

@wulfsberg thanks for sharing that, really useful!

Although I don't understand why you need to install assert, buffer and readable-stream since those are already dependencies of music-metadata-browser.

[wulfsberg]

Good question, really. I saw the compile sequence complain about missing them, and installed and polyfilled them without thinking about them already being dependencies.
As you say, it really should only be necessary to polyfill, since they are already there as dependencies, but running a couple of tests now, I seem to be getting a lot of obscure errors if don't install them explicitly.
The only things I can think of is that it's either pulling in different versions of subdependencies, or the installation somehow rejigs some import sequence.
So something seems brittle, though I'll not forswear that it is my brain currently.

[Borewit]

It it is tricky, I know.

I think these polyfill dependencies, which probably prevent music-metadata-browser from working straight away, is the main reason for the larger audience not to use it.

[lucaskawasaki]

I have this same problem. I followed these steps, but the error remains.

I don't have tsconfig.json, but in my project I have tsconfig.app.json and tsconfig.spec.json. Both I put "paths".

And I followed the trick by @wulfsberg as well.

Is there more change to do?

[Borewit]

@lucaskawasaki Can you check in your code so I can replicate your issue?

[lucaskawasaki]

Thanks for the answer. Well, I followed the steps at https://www.npmjs.com/package/music-metadata-browser

First I ran npm install music-metadata-browser

And I tried to run:

mm.parseReadableStream(readableStream, 'audio/mpeg', { fileSize: 26838 }) .then( metadata => { console.log(util.inspect(metadata, { showHidden: false, depth: null })); someReadStream.cancel(); });
And so these errors appeared:

ERROR in ./node_modules/strtok3/lib/FsPromise.js
Module not found: Error: Can't resolve 'fs' in 'C:\Instore\manager-ui\node_modules\strtok3\lib'
ERROR in ./node_modules/music-metadata/lib/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Instore\manager-ui\node_modules\music-metadata\lib'
ERROR in ./node_modules/music-metadata/lib/id3v2/ID3Stream.js
Module not found: Error: Can't resolve 'stream' in 'C:\Instore\manager-ui\node_modules\music-metadata\lib\id3v2'

So, I changed the:

• tsconfig.app.json;
• tsconfig.spec.json;

And changed the polyfills.ts:

[Borewit]

One thing I notice is that you are using es2015 modules, while I use common.js.
This is not much more then a of wild guess what potentially could go wrong.
I think I need to be able to reproduce the issue to give you better guidance.

To clarify the architecture a bit, music-metadata is module written for Node.js. music-metadata-browser aims to adapt/wraps it in a module suitable to be used to be executed in the browser. Typically not directly imported by the browser, but first pre-processed with a module-bundler like webpack, into a single downloadable and optimized JavaScript file.

[rafaelfiviola]

I also ran into this problem, however the only way I managed to fix it was by manually changing the reference from global to window in the index.js(line 43) file in your lib.

Edit: ran into some more issues involving global so I manually changed all references to window and now it's working like a charm. Could you maybe update it eventually? It's quite useful for my project.

I'm using Angular 8

[Borewit]

I also ran into this problem, however the only way I managed to fix it was by manually changing the reference from global to window in the index.js(line 43) file in your lib.

I think you are referring to line 43 from buffer version 4.3.0, released on 12 Jan 2016, included by webpack/node-libs-browser.

As you can see I have already proposed to update assert in that same library, and it seems it is not very likely any change is done.

You can find a working Angular 8 sample here.

[rafaelfiviola]

@Borewit thanks! I'm sorry I thought it was a problem with your things. Still a beginner to the angular/ts world.

[Borewit]

No problem, those poly-fills are tricky.