Typescript to vanilla JS for injecting IHttpClient

vNext
1

What is this:

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?

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

@inject(IHttpClient)

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

I think you need the following.

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

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

Since updating to beta 11 I get the following error

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:

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

or

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

or

@inject(newInstanceOf(IHttpClient))

The only thing that seems to be working is:

@inject(IHttpClient)
...
constructor(http) {
    this.http = http
}
1 Like
4

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!

5

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

6

Thatd be great, thanks :+1: