javascriptangulartorrentwebtorrent

Why this bare minimum Angular - WebTorrent setup is not working?

The setup seem straightforward.

Webtorrent usage reference

My setup:

import WebTorrent from 'webtorrent';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `bla`,
})
export class App {
  client = new WebTorrent();
}

Stackblitz

results in: enter image description here

WebTorrent: uTP not supported ReferenceError: process is not defined
    at node_modules/node-gyp-build/node-gyp-build.js (webtorrent.js?v=82fe16e7:930:16)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/node-gyp-build/index.js (webtorrent.js?v=82fe16e7:1121:24)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/utp-native/lib/binding.js (webtorrent.js?v=82fe16e7:1130:22)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/utp-native/index.js (webtorrent.js?v=82fe16e7:5932:19)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at webtorrent.js?v=82fe16e7:6226:16
    at (stackblitzstartersbvjzbh-ox4a--4200--7dbe22a9.local-credentialless.webcontainer.io/disabled):node_modules/webtorrent/lib/utp.cjs (https://stackblitzstartersbvjzbh-ox4a--4200--7dbe22a9.local-credentialless.webcontainer.io/@fs/home/projects/stackblitz-starters-bvjzbh/.angular/cache/17.3.3/vite/deps/webtorrent.js?v=82fe16e7:6231:7)
(anonymous) @ webtorrent.js?v=82fe16e7:6228
(disabled):node_modules/webtorrent/lib/utp.cjs @ webtorrent.js?v=82fe16e7:6231
__require2 @ chunk-NMEUP6WG.js?v=82fe16e7:50
(anonymous) @ webtorrent.js?v=82fe16e7:13396
webtorrent.js?v=82fe16e7:6494 Uncaught ReferenceError: global is not defined
    at node_modules/randombytes/browser.js (webtorrent.js?v=82fe16e7:6494:19)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at node_modules/k-bucket/index.js (webtorrent.js?v=82fe16e7:6527:24)
    at __require2 (chunk-NMEUP6WG.js?v=82fe16e7:50:50)
    at webtorrent.js?v=82fe16e7:13650:31
Solution

  • I am unable to get it working using ESM imports, but here is an alternative method to get it working.

    Do raise a GitHub issue for the same, for Angular it's a bug.

    Include the script in index.html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>My app</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
  </body>
</html>

    Then in the app component, access the WebTorrent property from window object:

    import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';
  uri = '';
  client: any;
  //

  ngAfterViewInit() {
    this.client = new (<any>window)['WebTorrent']();
    console.log(this.client);
  }
}

bootstrapApplication(App);

    Stackblitz Demo