# Typescript to vanilla JS for injecting IHttpClient

**URL:** <https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272>\
**Category:** vNext\
**Created:** [October 13, 2023, 1:57pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272 "2023-10-13T13:57:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [October 13, 2023, 1:57pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/1 "2023-10-13T13:57:55Z")

</div>

What is this:

```auto
import { IHttpClient } from '@aurelia/fetch-client';
import { newInstanceOf } from '@aurelia/kernel';
import { ICustomElementViewModel } from 'aurelia';

export class MyService {    
    constructor(@newInstanceOf(IHttpClient) readonly http: IHttpClient) {

    }
 }   

```

in vanilla js?

```auto
import { inject } from 'aurelia'
import { IHttpClient } from '@aurelia/fetch-client'

@inject(IHttpClient)

export class MyService {
  constructor(http) {
    this.http = http
  }
}

```

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [October 13, 2023, 4:34pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/2 "2023-10-13T16:34:51Z")

</div>

I think you need the following.

```ts
import { resolve, newInstanceOf } from '@aurelia/kernel';
import { IHttpClient } from '@aurelia/fetch-client';

export class MyService {
  http = resolve(newInstanceOf(IHttpClient));
}

```

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [February 14, 2024, 10:24am UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/3 "2024-02-14T10:24:20Z")

</div>

Since updating to beta 11 I get the following error

```auto
AUR0017:InterfaceSymbol<IHttpClient>
at createMappedError (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:80:40)
    at createNewInstance (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:1254:15)
    at eval (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:1241:54)
    at Resolver.resolve (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:1174:20)
    at Container.get (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:629:22)
    at Container.containerGetKey (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:871:17)
    at Array.map (<anonymous>)
    at Factory.construct (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:843:56)
    at Resolver.resolve (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:1283:57)
    at Container.get (webpack-internal:///./node_modules/@aurelia/kernel/dist/esm/index.mjs:642:34)

```

when using this code:

```auto
export class ApiService {
   http = resolve(newInstanceOf(IHttpClient))
}

```

or

```auto
export class ProductionApiService {
  constructor() {
    this.http = resolve(newInstanceOf(IHttpClient))
  }
}

```

or

```auto
@inject(newInstanceOf(IHttpClient))

```

The only thing that seems to be working is:

```auto
@inject(IHttpClient)
...
constructor(http) {
    this.http = http
}

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 14, 2024, 12:04pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/4 "2024-02-14T12:04:22Z")

</div>

Ahh there wasnt a test covering that injection, so in a refactoring to ensure injecting `IhttpClient` would yield the same instance with `HttpClient` regardless whats injected first, this bug was ibtroduced. Will fix it soon. Part of this is b3cause the way the fetch client package is used: its used without a registration so we dont have any opportunity to register all the symbols.

For now you can do `newInstanceOf(HttpClient)` instead. Sorry for the issue!

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [February 14, 2024, 2:41pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/5 "2024-02-14T14:41:13Z")

</div>

No worries. Thanks for the reply. Do you want me to create an issue about this on Github?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 14, 2024, 9:48pm UTC](https://discourse.aurelia.io/t/typescript-to-vanilla-js-for-injecting-ihttpclient/5272/6 "2024-02-14T21:48:35Z")

</div>

Thatd be great, thanks 👍