0

Given import { HttpModule } from '@angular/http'; that I import to my main application module (BrowserModule), and given that in the application I do DI of Http service all over the place, what will happen if:

  • I use some other module e.g. I created a feature module or I've downloaded npm package, let's call it CoolFeaturesModule
  • CoolFeaturesModule itself is importing HttpModule and injecting Http service

As far as I work it out, each module will have its own injector, and each injector will have a Http service provider registered. As a result I will have multiple instances of Http service. Is that correct?

dragonfly
  • 17,407
  • 30
  • 110
  • 219
  • No, it's not correct. Services are singleton by default. Once you use an injectable, DI keeps the same instance for the next use. – omeralper Jun 10 '17 at 17:39
  • Hmm, how about this quote from: https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464 `Most importantly, do not mix components/directives/pipes and services in the same module. Why?` and paragraphs that follow that quote. – dragonfly Jun 10 '17 at 17:41
  • Well yes, if modules are siblings, they can produce multiple instances of injectables, since DI can't find the service in the tree. You can use a shared module for it. Have a module that imports Http service, then use that module whenever you need the service. So then, your same service instance will be used everywhere. – omeralper Jun 10 '17 at 17:48
  • 2
    Possible duplicate of [Angular 2 injector hierarchy and NgModule](https://stackoverflow.com/questions/39031284/angular-2-injector-hierarchy-and-ngmodule) – Estus Flask Jun 10 '17 at 18:03

2 Answers2

0

There will be multiple instances of services based on angular.io docs

Dependencies are singletons within the scope of an injector. An application may have multiple injectors. An Angular application is a tree of components. Each component instance has its own injector. The tree of components parallels the tree of injectors.

Ashish Bajpai
  • 281
  • 2
  • 6
0

As said, injetables are singleton only if they are available in the dependency injection tree. When injectables are used, firstly component checks it's dependency array, if found, it uses it. If not it climbs up to upper tree till AppModule. In this conidition, as you can see, if components/modules are siblings (or not just somehow inherited each other) and if they provide their own HttpService, they will separately initialize it.

However, If you do not use lazy loading, all your services will already be recognized at your main module. So in any case, your services will be global and thus singleton.

https://plnkr.co/edit/JpEDf1pxO95knVUQLwdE?p=preview

 import {Component, NgModule, VERSION,Injectable} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {HttpModule,Http} from "@angular/http";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}


@Injectable() 
export class CustomHttpService{
  constructor(protected http: Http){

  }
}

@NgModule({
  imports:[HttpModule]
  providers:[CustomHttpService]
})
export class CustomHttpModule{}



@NgModule({
  imports: [ BrowserModule,CustomHttpModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
omeralper
  • 9,804
  • 2
  • 19
  • 27