I've been conducting a lot of experimentation with web pack 5 module federation. Having successfully been able to use angular as an app shell for other other angular apps. I have also been able to have angular act as an app shell for react. When orchestrating micro-frontends created in angular it is easy to share services given the injector is shared between the embedded apps. However, this is not the case with say react where there is no di system. I have been considering for some time how to best share services from the angular app shell with micro-frontends created with other frameworks like react to start. This seems like it might fit the bill. Has anyone conducted this type of experimentation of sharing angular services with federated modules that are created in other frameworks like react.

This is an example of the micro-frontend that acts like an extension to add a new plugin to a service defined inside the app shell. I would like to be able to do the same exact thing with other frameworks like react.

https://github.com/rollthecloudinc/workflow-designer/blob/master/projects/mfe1/src/app/download.module.ts

export class DownloadModule { 
  constructor(
    cpm: ContentPluginManager,
    downloadHandler: DownloadContentHandler
  ) {
    console.log('register mfe1 download content plugin');
    // @todo: lint not picking up register() because in plugin module base class.
    cpm.register(mfe1DownloadContentPluginFactory({ handler: downloadHandler }));
  }
}

The ContentPluginManager is part of the shell app. However, the injector is shared here since both apps use the same exact Angular version and our framework core library versions.

Perhaps when a service is registered with the angular di system it could also be registered with this di system as well. That would than make the service available to any app that uses this di system regardless of framework, right. The intention is to be able to register plugins from outside projects without requiring users to use Angular. Effectively enabling devs to create completely separate projects that provide extensions for the app shell plugin system and potentially provide their own plugin definitions. However, none of that is possible at the moment unless using angular because it is all tightly coupled to sharing services via the angular di system which is not available in other frameworks like react.

The guide that was linked in readme doesn't contain all the necessary information, this especially applies to users with little or no Angular experience.

For starters, I would suggest to add these links also,

https://angular.io/docs/ts/latest/cookbook/dependency-injection.html
https://angular.io/docs/ts/latest/cookbook/ts-to-js.html#!#dependency-injection

There also may be some API differences that aren't covered (Angular itself lacks centralized injector API documentation, the items are just scattered over @angular/core API reference). It looks like Host won't work as expected.

By the way, thanks for the great initiative on injector extraction.

Is there an expressive and easy way to declare the providers of an Injectable inside that class? What would be the alternative of this in your library?

@Injectable({ 
  providers: ...
});

Many thanks. I await your reply.

This project looks fantastic. Coming from the Angular-world I'm not 100% sure how to use this module looking at the documentation:

In Angular I am used to declare the providers within a module or component. That way i have the possbility to declare singletons for the whole app or one instance per module or per component.

Questions:

• Where to register providers for global/scoped usage?
• How to inject them?
• Do they work across different files?

E.g. i want to use HttpClient from Angular as one instance globally. Also i want to create one instances of my service @Injectable() GameStoreService for a each class Game { } or each element of an array.

Using this library, I get a typescript error as specified in the title.

Typescript: v2.3.2
injection-js: v2.0.1

My work-around is to enable "skipLibCheck": true in the tsconfig.json.

This library was working beautifully in the TypeScript application I was writing (thanks! 😁) that targeted ES5. I wanted to use private identifiers which requires targeting ES2015 or higher. So I switched the target to ES2015 and everything broke.

Specifically, this line fails because prototype is undefined when using a factory provider (useFactory):

I've tried using @abraham/reflection, reflect-metadata and core-js/es7/reflect and all had the same outcome. This is my TypeScript config:

{
    "compilerOptions": {
        "lib": ["ES2015"],
        "target": "ES2015",
        "module": "CommonJS",
        "strict": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

I can put together a small reproduction if needed. I just thought I'd check here first in case this is a known limitation.

I'm trying to use this in a node project written in TypeScript (tried running it with ts-node and with the code compiled to JS).
I've got to the point where I just copied the very basic example from the readme, and still get the same result.
I made sure 'reflect-metadata' and 'injection-js' both installed and on latest version.
What am I missing?

This is the code:

import 'reflect-metadata';
import { ReflectiveInjector, Injectable, Injector } from 'injection-js';

class Http {}

@Injectable()
class Service {
    constructor(private http: Http) {}
}

const injector = ReflectiveInjector.resolveAndCreate([
    Service,
    Http
]);

console.log(injector.get(Service) instanceof Service);

And this is the exception:

D:\proj>ts-node "./src/index.ts"

D:\proj\node_modules\injection-js\injection.bundle.js:684
    return Error('Cannot resolve all parameters for \'' + stringify(typeOrFunc) + '\'(' +
           ^
Error: Cannot resolve all parameters for 'Service'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Service' is decorated with Injectable.
    at noAnnotationError (D:\proj\node_modules\injection-js\injection.bundle.js:684:12)
    at _dependenciesFor (D:\proj\node_modules\injection-js\injection.bundle.js:1377:15)
    at resolveReflectiveFactory (D:\proj\node_modules\injection-js\injection.bundle.js:1277:24)
    at resolveReflectiveProvider (D:\proj\node_modules\injection-js\injection.bundle.js:1300:82)
    at Array.map (native)
    at resolveReflectiveProviders (D:\proj\node_modules\injection-js\injection.bundle.js:1307:31)
    at Function.ReflectiveInjector.resolve (D:\proj\node_modules\injection-js\injection.bundle.js:1504:16)
    at Function.ReflectiveInjector.resolveAndCreate (D:\proj\node_modules\injection-js\injection.bundle.js:1533:62)
    at Object.<anonymous> (D:\proj\src\index.ts:11:37)
    at Module._compile (module.js:571:32)

Hi,

i am a little lost with if these are Singletons or new instances that are being injected. I am using the following example

const injector = ReflectiveInjector.resolveAndCreate([
    FirstHelper,
    SecondHelper,
    Game
]);

If they are actually instances then how do we force a singleton to be injected ? And if these are singletons or can we ensure that a new instance is injected each time ?

Does anyone have some examples ?

I am using typescript if that makes a difference.

Thanks

Hello. I have been trying to use test the code that I wrote using this framework but I have not succeeded so far. Are there resources I can look into? All the ones I found online are specific to Angular.

For some libraries, it makes sense to have access to create our own decorators to store their own metadata. It would be great to expose the decorator creation API to consumers, or offer some way to create custom, DI-compatible decorators without having to make something @Injectable and @MyDecorator

I think this is possible with injection-js ^^. how do you think ? I want to do an experimental example but I hope I could receive some advice from you first.

Hi,

I am having a few issues, I am getting the following error

Error:(54, 5) TS2345:Argument of type '{ FirstHelper: typeof FirstHelper; SecondHelper: typeof SecondHelper; }' is not assignable to parameter of type 'Provider[]'.
Object literal may only specify known properties, and 'FirstHelper' does not exist in type 'Provider[]'.

Also running it in the browser gives a second error, but i presume its because of the first one above

Uncaught TypeError: providers.forEach is not a function
    at _normalizeProviders (injection.bundle.js:1333)
    at resolveReflectiveProviders (injection.bundle.js:1292)
    at Function.ReflectiveInjector.resolve (injection.bundle.js:1764)
    at Function.ReflectiveInjector.resolveAndCreate (injection.bundle.js:1794)
    at Object.<anonymous> (Game.ts:53)
    at __webpack_require__ (bootstrap 1bf5f5c…:19)
    at Object.<anonymous> (bootstrap 1bf5f5c…:39)
    at __webpack_require__ (bootstrap 1bf5f5c…:19)
    at bootstrap 1bf5f5c…:39
    at bootstrap 1bf5f5c…:39

I have 2 clases, FirstHelper and SecondHelper, I wish to inject SecondHelper into First Helper.

I hope someone can help ?

I am basically doing the following

import "reflect-metadata";
import { ReflectiveInjector, Injectable } from 'injection-js';

import {FirstHelper} from "./infrastructure/helpers/FirstHelper";
import {SecondHelper} from "./infrastructure/helpers/SecondHelper";

const injector = ReflectiveInjector.resolveAndCreate({
    FirstHelper,
    SecondHelper
});

which is what is giving the provider error, I am placing my 2 classes below to demonstrate what I am doing.

First Helper is here

import "reflect-metadata";
import {Injectable} from "injection-js";
import {SecondHelper} from "./SecondHelper";

@Injectable()
export class FirstHelper  {
    constructor(private secondHelper: SecondHelper) {
        debugger;
    }
    public print() {
        console.log("I am FirstHelper");
    }
}

and Second Helper is here

import "reflect-metadata";
import {Injectable} from "injection-js";
@Injectable()
export class SecondHelper  {

    public print() {
        console.log("I am SecondHelper");
    }
}

In Angular, if you want to define a provider via a factory in order to choose between several implementations based on context, you do it in the module.

Is this possible with injection-js ?

I've been trying to create my own decorators, but don't really have any luck atm.

In angular you can do something like this:

interface ModuleDecorator {
    (module: Module): Module
    new (module: Module): Module
}

interface Module {
    providers: Provider[]
}

const Module = <ModuleDecorator>makeDecorator('Module', (module: Module) => module);

However when doing this with the makeDecorator provided by injection-js the properties are not set to the decorator.

After a quick search I found out this sorta works

const Module = <ModuleDecorator>makeDecorator('Module', ['module']);

However that creates the following

DecoratorFactory {
  module: { providers: [] }
}

Instead, I want the following:

DecoratorFactory {
  providers: []
}

tslint has been deperated, it would be better to migrate to eslint

Hi Minko,

I'm implementing a framework for efficiently creating modern web apps based on angular (2), express and knex. For the angular part I'm using angular DI, for the express part I'm using ts-express-decorators DI.

For the part which is client/server independent I started to use injection-js because it's compatible with angular and really powerful. Now I'm implementing decorator based modules and components like in angular, but have some trouble with creating the injector hierarchy.
Like in angular I experiment with bootstrapping my root module with a root component and providers.

What is the right way to setup and link hierarchical injectors? When to use ReflectiveInjector.resolveAndCreate()/createChildFromResolved() or something like this?

Is it possible to reset your library (global state) to some initial state for unit testing and testing the bootstrapping in various tests?

Regards,
Walter

I noticed that as of Angular 5, ReflectiveInjector is deprecated in Angular. What are your plans for this extraction of that code? Will you be updating to the StaticInjector implementation or just maintaining ReflectiveInjector separately here in injection-js going forward?

Hello,
I know this is not supposed to be a part of a di, but still going to ask it. I've been researching the way Angular handles the @NgModule decorator, but I can't figure it out. Is it possible to build something similar with injection-js?

The link to https://angular.io/guide/ts-to-js#!#dependency-injection is no good.

Reflect metadata polyfill is needed only for decorators and Class. It may not be needed if a class/function is annotated with parameters and annotations.

Also, reflect-metadata can be replaced with core-js (core-js/es7/reflect) which is conveniently used for polyfills.

Arrange:

class Http { }

@Injectable()
class Service {
  constructor(
    private http: Http,
    @Inject(CONFIG_TOKEN) private config: Config // this cause the resolve error (see bellow)
  ) { }
}

interface Config {
  api: string
}
const config: Config = {
  api: 'api/v1'
}

const CONFIG_TOKEN = new InjectionToken<Config>('CONFIG_TOKEN')

Declare the providers:

const injector = ReflectiveInjector.resolveAndCreate([Service, Http, {
  provide: CONFIG_TOKEN, useValue: config
}]);

Consume:

injector.get(Service)

An error:

Error: Cannot resolve all parameters for 'Service'(Http, @Inject). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Service' is decorated with Injectable.

Demo: https://stackblitz.com/edit/typescript-iascmw

Details:
Seems that InjectionToken, OpaqueToken, native Symbols don't work as declaring keys for providers.
With strings, everything works as expected.

Hi!

Thank you so much for making this available outside of Angular.

I'm attempting to create a class decorator that sets configuration values based on property decorators, but it seems that overriding the constructor with a class decorator makes injection-js stop working. Here's an example of my code:

export function Configurable() {
  return <T extends {new(...args: any[]): {}}>(constructor: T): T => {
    return class extends constructor {
      constructor(...args: any[]) {
        super(...args);
        console.log('HERE!');
      }
    };
  };
}

When I use this along with the @Injectable() decorator, 'HERE! is logged to the console, but dependencies are not injected.

Any ideas on how to get both to work?

Hello and thanks for the awesome library! I'm already using it through rea-di, but currently I am stuck with some weird errors so maybe you can give a hint.

I've set up an example repo to better illustrate the issue.

Basically, doing a type annotation in a class constructor and setting the Injectable() decorator on the class somehow is not enough for the provider registration. This is code that does not work.
The error I'm getting is:
index.js:1375 Error: Cannot resolve all parameters for 'Service'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Service' is decorated with Injectable. 

I've imported the reflection polyfill (@abraham/reflection), but also tried with reflect-metadata and the error persists. Also, tsconfig has experimentalDecorators and emitDecoratorMetadata set to true.

Somehow, the ES6 version of the code does work in ts environment. But then the registration is manual which is not ideal.

Any idea what can be the case? Can you maybe provide a basic typescript example set up that works?

I am using injection-js to implement ioc without angular. It worked fine. But the constructor of the injected class was triggered multiple times. Here the code

    // var bindings = ReflectiveInjector.resolve([DataService]);
    // const injector = ReflectiveInjector.fromResolvedProviders(bindings);
    const injector = ReflectiveInjector.resolveAndCreate([DataService]);
    this.dataService = injector.get(DataService)

Neither fromResolvedProviders nor resolveAndCreate works. Am I using it the wrong way or this library does not intend to implement singleton?

Hi, From the readme it seems that the answer is 'no'.
but, do you have support for modules? (Similar to NgModule)

export const I_API_LOCATOR = new InjectionToken<IApiLocator>('Api locator interface.');
const apiLocatorProvider: ClassProvider = {provide: I_API_LOCATOR, useClass: ApiLocatorConfig};
const providers: Array<any|Provider> = [apiLocatorProvider, ApiService];

Doesn't function as expected. Class ApiService with constructor:
constructor(@Inject(I_API_LOCATOR) apiLocator: IApiLocator)
Never gets to be added to the above providers, meaning the constructor injection never gets to be injected. Works ok if I use just type ApiLocatorConfig injection, but that's useless.

Question: Is it possible to register service like this (useful for db connections and etc...):

{
      provide: SomeService,
      useFactory: async () => {
        const conn = await createConnection({});
        return new SomeService(conn);
      },
      deps: []
}

and to get resolved service from the injector:

// should be instance of already resolved service not a promise
injector.get(SomeService);

I have a React project built with typescript and nextjs.
I have modules that are loaded dynamically, so I cannot initiate them all at once, I need to initiate them dynamically.

I would like to do something like this:

const injector = ReflectiveInjector.resolveAndCreate([Service, Http]);

// later in the application
injector.dynamicResolveAndCreate([Service2, Http])  // Http may be found in multiple modules


injector.get(Service)
injector.get(Service2)

Is there currently a way to achieve this?

Is there a way to dynamically resolve a bunch of dependencies without importing them into every file they need to be resolved in?

For example, I have a WebsocketCommandHandler:

export class WebsocketCommandHandler {

  private game: Game;

  public async init(emitCallback: (id, data) => void) {
    this.game = new Game();
    await this.game.init(this);
  }

Game, however, has a big constructor due to needing to initialize a lot of dependencies in a particular order:

export class Game {

  private ticksElapsed = 0;

  public wsCmdHandler: WebsocketCommandHandler;

  constructor(

    public logger: Logger,
    public contentManager: ContentManager,

    public db: Database,

    public accountDB: AccountDB,
    public characterDB: CharacterDB,
    public worldDB: WorldDB,

    public profanityHelper: ProfanityHelper,

    public lobbyManager: LobbyManager,
    public characterRoller: CharacterRoller,
    public itemCreator: ItemCreator,
    public npcCreator: NPCCreator,

    public calculatorHelper: CalculatorHelper,
    public itemHelper: ItemHelper,
    public npcHelper: NPCHelper,
    public characterHelper: CharacterHelper,
    public playerHelper: PlayerHelper,

    public messageHelper: MessageHelper,
    public commandHandler: CommandHandler,

    public playerManager: PlayerManager,
    public worldManager: WorldManager

  ) {}
}

These services also can inject each other, but this big object needs to have a reference to all of them and initialize all of them in order (that logic is elsewhere). However, I do not want to import every service in two locations (Game and WebsocketCommandHandler) just to set up the Game object. I would like WebsocketCommandHandler to be able to dynamically infer these new dependencies as they come up.

Since I believe I will have to do this in Game (to inject all of the child services) I would like a solution to dynamic resolution so I don't need to continually update the Game file with the changed injection order every time I change it.

Previously I used typescript-ioc because it would auto inject and resolve dependencies in a particular order, but I found that it would sometimes fail to resolve things and give unhelpful output so tracking down the errors are nigh impossible and this particular solution seems a bit cleaner.

The closest thing I found is #6, but this even still seems to have a fair bit of manual work associated per service.

Uncaught Error: Cannot read property 'match' of undefined: Error during instantiation of AgendaService! (Server -> AgendaService).

wrappedError
injectionError
instantiationError
ReflectiveInjector_._instantiate

Enviroment:
injection-js: ~2.2.1
npm: 5.5.1
node: 9.2.0
typescript: ~2.5.3

The following scenario is applicable for Typescript (only) I guess:

Is it possible to resolve dependencies when a class constructor is defined to have an interface instead of another class?

Consider the following scenario:
interface ITransport -> is defined and has get() method
Class Http -> implements ITransport interface
Class Service -> has a constructor with a paramerter of type ITransport

Is there a way we can use
ReflectiveInjector.resolveAndCreate([Service, Http])

Ideally if Http implements ITransport then shouldn't the dependency resolver be able to inject it automatically when creating an instance of Service class?

Add InjectionToken.

@mgechev Hi
Something is missing or I dont understand something... :P
I get it that we can resolve dependencies for the providers.
But I want to have a class that is not instanced in the DI but
that resolve dependencies in its constructor...

Something like Directives in Angular 2 :

class Service {}

@MyElement()
class TotoElement {
    constructor(private svc: Service) {}
}

const injector = ReflectiveInjector.resolveAndCreate([
    Service
]);

Do I have to instance TotoElement and resolve the constructor myself ?

Thanks

Seems like the ReflectiveInjector is unable to resolve parameters of the parent class.
Example:

class SomeService {
  fetch() {
    console.log('fetching...');
  }
}

class abstract Parent {
  constructor(private service: SomeService) {}

  protected fetchAndDoStuff() {
    this.service.fetch();
  }
}

class Child extends Parent {
   
}

The injector should resolve the Parent constructor as no constructor is defined in Child. Instead it does nothing.