Angular with League Connect

[unrealxqt]

Hi,

So i'm trying to use the library with Angular 14 and I keep getting issues as follows:

Error: node_modules/league-connect/dist/index.d.ts:4:8 - error TS1259: Module '"pathtoproject/node_modules/@types/ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

4 import WebSocket, { ClientOptions } from 'ws';

  node_modules/@types/ws/index.d.ts:377:1
    377 export = WebSocket;

This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Do you have any tips?

[junlarsen]

Could you post how you import league-connect, and your tsconfig.json?

[unrealxqt]

Sure:

import { authenticate } from 'league-connect' at the top of my component.ts

tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false,
    "strictPropertyInitialization": false
  },
}

[unrealxqt]

I modified the tsconfig.json like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "esModuleInterop": true,
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false,
    "strictPropertyInitialization": false
  },
  "allowSyntheticDefaultImports": true
}

so I added "allowSyntheticDefaultImports": true and "esModuleInterop": true, to compiler options as others suggested for other libraries. The original error is now gone, I am now facing an another issue which I don't really understand.

I am getting errors like this:

./node_modules/league-connect/dist/index.js:4:0-31 - Error: Module not found: Error: Can't resolve 'child_process' in 'node_modules\league-connect\dist'

./node_modules/league-connect/dist/index.js:5:0-24 - Error: Module not found: Error: Can't resolve 'util' in 'node_modules\league-connect\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./node_modules/league-connect/dist/index.js:219:0-26 - Error: Module not found: Error: Can't resolve 'https' in 'node_modules\league-connect\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

./node_modules/league-connect/dist/index.js:221:0-28 - Error: Module not found: Error: Can't resolve 'assert' in 'node_modules\league-connect\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

./node_modules/league-connect/dist/index.js:334:0-26 - Error: Module not found: Error: Can't resolve 'http2' in 'node_modules\league-connect\dist'

[unrealxqt]

I manage to solve the issue by delegatin this whole process to a nodejs backend instead of angular.

Is there any way to make it work on a remote server and not localhost?

[junlarsen]

I thought you were using Electron or something my bad. No you can't really run it on a server since the client is on the user's computer

[unrealxqt]

Thank you for your quick response and help!