livekit-client 1.14.0 broken in Angular app

[pabloFuente]

Describe the bug

What I'm expecting

Adding livekit-client: 1.14.0 dependency to an Angular 16 project should work fine.

What happens instead

Compilation of Angular 16 app (ng build) fails with the following error

Error: node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:24:51 - error TS2304: Cannot find name 'this'.

24     setProcessor(processor: TrackProcessor<typeof this.kind>): Promise<void>;
                                                     ~~~~

Which seems related to the track-processors API.

Reproduction

The error is easily replicable with the following steps:

# Create new Angular 16 project
ng new test-project --defaults

# Install livekit-client dependency
cd test-project && npm i livekit-client@1.14.0

# Add an import of the livekit-client in the project
sed -i '1s/^/import * as LiveKit from "livekit-client";\n/' src/app/app.component.ts

# Try to build. THIS FAILS
ng build

Logs

user@user-pro:~/Desktop/test-project$ ng build
✔ Browser application bundle generation complete.

Error: node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:24:51 - error TS2304: Cannot find name 'this'.

24     setProcessor(processor: TrackProcessor<typeof this.kind>): Promise<void>;
                                                     ~~~~

System Info

Versions:

- OS: linux x64 (Ubuntu 22.04.3 LTS)
- Node: 18.18.2
- Package Manager: npm 9.8.1
- Angular: 16.2.9
- livekit-client: 1.14.0

Severity

blocking all usage of LiveKit

Additional Information

There is a way of fixing the issue manually, which is making an import in file node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:

import *  as TrackKind from './Track';

And replacing <typeof this.kind> with <TrackKind.Track.Kind> in line node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:24:51

But of course this is far from ideal.

[lukasIO]

Hi,

could you post the exact error message you get? It can't be the same as in #166 because we have since replaced the protobuf library that imported those paths.
Are you seeing "only" the logger error at first?

[pabloFuente]

Ouch, I just realized that the first error is actually happening when adding livekit-server-sdk library to the Angular project, which of course may fail.
I have already updated the issue to only focus on the second error.

[lukasIO]

had a closer look at this. Solving it differently without breaking backwards compatibility seems tricky.
I found this thread talking about the whole thing, one suggestion is to use TrackProcessor<this['kind']> instead of the typeof this.kind approach. Could you give that a try?

[pabloFuente]

Well, that solution is pretty much the same as I described in my Additional Information section in my first comment:

Additional Information

There is a way of fixing the issue manually, which is making an import in file node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:

import *  as TrackKind from './Track';

And replacing <typeof this.kind> with <TrackKind.Track.Kind> in line node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:24:51

Basically changing the way file LocalAudioTrack.d.ts declares that typing, which seems unsupported in the latest Angular version (probably due to its TypeScript version). It fixes the problem, but of course it means that the latest version of livekit-client does not work out-of-the-box in the latest version of an Angular project. Not a real blocking issue, but I guess it might be for Angular developers who decide to give LiveKit a quick try.

[lukasIO]

Well, that solution is pretty much the same as I described in my Additional Information section in my first comment:

It's not the same, as it will keep the actual type information. TrackKind.Track.Kind as you suggested doesn't specify whether the track is an audio or a video track.

Did you confirm that TrackProcessor<this['kind']> works for your Angular setup? If that's the case then I can open a PR with that change and change it in the client sdk directly.

[pabloFuente]

I have confirmed that replacing TrackProcessor<typeof this.kind> with TrackProcessor<this['kind']> in node_modules/livekit-client/dist/src/room/track/LocalAudioTrack.d.ts:24:51 fixes the TypeScript compilation problem.
I am guessing that replacing these occurrences with this['kind'] should be enough to bypass this TypeScript "limitation".

[lukasIO]

nice, thanks! would you want to open a PR for it?

[pabloFuente]

Sure. I've already opened this one for a typo fix in the documentation, so I'm familiar with the process 😃

[lukasIO]

closed via #901