IPFS Angular11 ipfs-http-client new IpfsHttpClient = Error: export 'AbortController', Multiaddr

Question

Hello I have issue with ipsf-http-client using angular. On return new IpfsHttpClient() I have missing Multiaddr, anySignal, AbortController and other exports. Also I have error: This expression is not constructable, (.../ipfs-http-client/types/src/index")' has no construct signatures. Please for hints how to solve it or how to correctly implement ipsf-http-client in angular application

Angular CLI: 12.1.4
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64
Python: 3.10

inside tsconfig:

"skipLibCheck": true,
"target": "es2017",
"module": "es2020",
"lib": [
  "es2018",
  "dom",
  "DOM.Iterable",
  "es2015", 
  "es2015.iterable",
],
"paths" : {
  "crypto": ["./node_modules/crypto-browserify"],
  "stream": ["./node_modules/stream-browserify"],
  "assert": ["./node_modules/assert-plus"],
  "http": ["./node_modules/stream-http"],
  "https": ["./node_modules/https-browserify"],
  "os": ["./node_modules/os-browserify"],
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,

Below is main ipfs init token.

import { Injectable, InjectionToken, Inject } from '@angular/core';
import IpfsHttpClient from 'ipfs-http-client';

export const ipfsToken = new InjectionToken('The IPFS Token', {
  providedIn: 'root',
  factory: () => {
    try {
      return new IpfsHttpClient('ipfs.infura.io', '5001', {
        protocol: 'https'
      });
    } catch (err) {
      console.log('Error', err);
      throw new Error('Unable to access IPFS node daemon on Infura network');
    }
  }
});

I can prevent constructable error with solution below, but still I have Missing Multiaddr, anySignal, AbortController and other exports.

import { Injectable, InjectionToken, Inject } from '@angular/core';
import IpfsHttpClient from 'ipfs-http-client';

export const ipfsToken = new InjectionToken('The IPFS Token', {
  providedIn: 'root',
  factory: () => {
    let contextClass : any = IpfsHttpClient;
    let context: IpfsHttpClient.IPFSHTTPClient = new contextClass('ipfs.infura.io', '5001', {
        protocol: 'https'
      });

    try {
        console.log("IPFS");
        
      return context;
    } catch (err) {
      console.log('Error', err);
      throw new Error('Unable to access IPFS node daemon on Infura network');
    }
  }
});

Answer 1

After 2 days of getting the annoying Multiaddr, anySignal and AbortController not found error in my ionic project, I notice that I were using the incorrect ipfs package version. To elaborate:

I installed ipfs with: npm install --save ipfs-http-client . The official package documentation describes this command in the Installation section. The command installed ipfs version 54.0.2 (I checked out in the package.json file in the project working directory).

The official npm command in the official package documentation (check out top right corner) is npm i [email protected].

After deleting the package.json ipfs section and the node_module folder, I ran the npm i [email protected] and reinstalled all packages using npm install. This time it worked out without any errors.

PS: I believe that the release version in the npm manager is mistaken with a development version.