Exporting dependencies' dependencies in Angular 2 through multi-providers

Question

Exporting dependencies' dependencies in Angular 2 through multi-providers

Utilizing a multi-provider is the next step I'm considering in order to export both dependencies of my dependency along with itself, allowing for them to be injected into a component simultaneously.

For example, when setting up a component:

import {Component} from 'angular2/core';
import { FOO_PROVIDERS } from './foo';

@Component({
  selector: 'app',
  providers: [FOO_PROVIDERS]
})
export class App {}

the provided code snippet

import {Inject, Injectable, provide} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

export class Foo {
  constructor(@Inject(Http) http) {}
}

export const FOO_PROVIDERS = [
  provide(Foo, { useClass: Foo, multi: true }),
  provide(Foo, { useValue: HTTP_PROVIDERS, multi: true })
];

may lead to the error message:

No provider for Http! (App -> Foo -> Http)

However, if you consider this alternative approach

import {Inject, provide} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

class Foo {
  constructor(@Inject(Http) http) {}
}

export const FOO_PROVIDERS = [Foo, HTTP_PROVIDERS];

you'll notice it functions correctly, despite appearing to serve a similar purpose. This raises the question of whether there is a proper use case for multi-provider in this scenario.

javascript typescript angular angular2-services

Answer 1

Answer №1

When you declare provide(Foo, ...), then you are able to

constructor(foo:Foo)

by setting multi: true all registered providers as Foo will be passed to you

constructor(foo:any)

By using

export const FOO_PROVIDERS = [
  provide(Foo, { useClass: Foo, multi: true }),
  provide(Foo, { useValue: HTTP_PROVIDERS, multi: true })
];

and

constructor(@Inject(Foo) foo:Foo[])

you will receive an array in the variable foo containing an instance of Foo and a list of providers (including those in HTTP_PROVIDERS) as the second item

update

You might have different expectations regarding the outcomes. I fail to see the relevance of @Inject(Http) http here. The registration of HTTP_PROVIDERS as a value for Foo is what matters. It doesn't matter what value you assign to useValue during provider resolution. Dependency injection locates providers for Foo and passes the assigned value without considering its nature. In the given example, there is no provider for Http, which means that Foo cannot have Http injected directly. To achieve this, you must register Http separately by including it in the providers or by adding HTTP_PROVIDERS directly as it includes Http (equivalent to provide(Http, {useClass: Http}))

update2

// A service to be injected that requires another dependency
@Injectable()
class Foo {
  constructor(private http:Http);
}

// Collection of dependencies    
@Injectable()
class MyProviders {
  // Include all components you wish to access in your application
  constructor(public foo:Foo, public bar:Bar, ...);
}

class MyComponent {
  // Injecting only MyProviders and utilizing the provided dependencies
  constructor(private providers: MyProviders) {
    // Accessing the provided functionalities
    providers.foo.doSomething();
    providers.bar.doSomethingElse();
  }
}

// Including all providers to enable DI in resolving all aforementioned dependencies
bootstrap(AppComponent, [HTTP_PROVIDERS, Foo, Bar]);

}

Answer 2

When you declare provide(Foo, ...), then you are able to

constructor(foo:Foo)

by setting multi: true all registered providers as Foo will be passed to you

constructor(foo:any)

By using

export const FOO_PROVIDERS = [
  provide(Foo, { useClass: Foo, multi: true }),
  provide(Foo, { useValue: HTTP_PROVIDERS, multi: true })
];

and

constructor(@Inject(Foo) foo:Foo[])

you will receive an array in the variable foo containing an instance of Foo and a list of providers (including those in HTTP_PROVIDERS) as the second item

update

You might have different expectations regarding the outcomes. I fail to see the relevance of @Inject(Http) http here. The registration of HTTP_PROVIDERS as a value for Foo is what matters. It doesn't matter what value you assign to useValue during provider resolution. Dependency injection locates providers for Foo and passes the assigned value without considering its nature. In the given example, there is no provider for Http, which means that Foo cannot have Http injected directly. To achieve this, you must register Http separately by including it in the providers or by adding HTTP_PROVIDERS directly as it includes Http (equivalent to provide(Http, {useClass: Http}))

update2

// A service to be injected that requires another dependency
@Injectable()
class Foo {
  constructor(private http:Http);
}

// Collection of dependencies    
@Injectable()
class MyProviders {
  // Include all components you wish to access in your application
  constructor(public foo:Foo, public bar:Bar, ...);
}

class MyComponent {
  // Injecting only MyProviders and utilizing the provided dependencies
  constructor(private providers: MyProviders) {
    // Accessing the provided functionalities
    providers.foo.doSomething();
    providers.bar.doSomethingElse();
  }
}

// Including all providers to enable DI in resolving all aforementioned dependencies
bootstrap(AppComponent, [HTTP_PROVIDERS, Foo, Bar]);

}

Exporting dependencies' dependencies in Angular 2 through multi-providers

Answer №1

Similar questions

Rerender not occurring after array splice with React hooks setter

Encountering unanticipated undefined elements while incorporating map in JSX

Looping through an array in nodejs and appending each iteration to a single file

Eliminating a pattern with underscore.js or jquery - the complete guide

Toggling checkboxes based on user input

Guide on retrieving information from Spark and showcasing it through Angular

"Exploring the Synchronization Feature in Vue.js 2.3 with Element UI Dialog Components

jquery personalized auto-suggest

Encountering errors when trying to render views in Node/Express is a common

The animation in ThreeJs encounters context issues within Angular 2

Passing parameters to an Angular CLI ejected app

Here’s a guide on accessing variable values from different JavaScript files in Nuxt.js

The Material-UI selector isn't functioning properly for me

Understanding and Decoding Javascript Error Messages

Using Systemjs with Angular 2 results in 50 server calls for loading resources

Issue with Bootstrap v3.3.6 Dropdown Functionality

Incorporating optional fields into the form builder without being mandatory

A comparable alternative to useRouteMatch in Next.js

I continue to encounter the error "Unexpected token b in JSON at position 0" when attempting to parse JSON data

Toggle the Bootstrap navbar class based on the current scroll position