How to use Angular @Injectable with a function (not a class)

Question

I'm creating a service for an Angular (2+) application and all the documentation uses classes, but I prefer to write the service as a function.

Here's what I want to work (but doesn't):

import { Injectable } from '@angular/core';

export const AframeMessengerService = Injectable()(function AframeMessengerService() {
    console.log('aframe messenger');
});

With this, I get this error in the file which injects it:

Cannot find name 'AframeMessengerService'.

Here's what does work, but is not what I want:

import { Injectable } from '@angular/core';

@Injectable()
export class AframeMessengerService {
    constructor() {
        console.log('aframe messenger');
    }
}

Answer 1

Basically you're doing everything correct here:

import { Injectable } from '@angular/core';

export const AframeMessengerService = Injectable()(function AframeMessengerService() {
    console.log('aframe messenger');
});

Now you need to add this to module providers:

import { AframeMessengerService } from './a.service';

@NgModule({
  ...
  providers: [AframeMessengerService],
})
export class AppModule {}

And inject it like this:

import { AframeMessengerService } from './a.service';

@Component({
  selector: 'my-app',
  ...
})
export class AppComponent {   
  constructor(@Inject(AframeMessengerService) s) { }

One thing to note is that when you will be injecting services into AframeMessengerService you need to pass an index of parameter:

import { Inject, Injectable, Injector } from '@angular/core';

const AframeMessengerService = Injectable()(function AframeMessengerService(i) {
  console.log('aframe messenger');
});

Inject(Injector)(AframeMessengerService, null, 0);
                                         ^^^^^^^

export { AframeMessengerService };