0

In the code sample below, app.module sets the providers to use for Angular dependency injection. Angular, therefore has a reference to the DataService class.

// app.module.ts 
import { DataService } from './services/dataService';
import { LocationsComponent } from './components/locations.component';
@NgModule({
  declarations: [
    AppComponent,
    LocationsComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My understanding is that in locations.component Angular will perform the DI to create a new instance of the DataService class in the constructor. What I don't understand is why import { DataService } is needed in the component? Why can't Angular provide this DataService instance to the constructor when it see the DataService type specified in the constructor since Angular knows from app.module where to find the DataService class? The import { DataService } in locations.component seems redundant.

// locations.component.ts
import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html'
})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}
9
  • if you dont import it, how do you expect to use it? Apr 27, 2018 at 15:32
  • 2
    I don't think this is related to Angular at all. TypeScript won't compile if you try to reference a class that isn't defined anywhere in the file or globally. Apr 27, 2018 at 15:32
  • I think I understand your question. It is not why are imports needed but it is: Why do you have to specify the same import 2x, once at the point of use (component) and once in the module declaration.
    – Igor
    Apr 27, 2018 at 15:35
  • Yes, Igor. A reference to the object is available from the import in app.module, which runs first. Why can't this reference be passed automatically to the component and supply the instance to the constructor?
    – lance-p
    Apr 27, 2018 at 15:42
  • 1
    imports are not consumed by angular but by the typescript compiler. The compiler knows nothing about components and injection but it wants to know whenever you mention a classname in a file where the definition for that class lives so it can load it and check for syntax errors etc.It's also wrong to assume that locations.component.ts means the same DataService as app.module.ts from a compiler standpoint.
    – zapl
    Apr 27, 2018 at 15:46

1 Answer 1

1

I think I understand your question. It is not why are imports needed but it is:

Why do you have to specify the same import 2x, once at the point of use (component) and once in the module declaration.

You technically don't have to specify the import of the service at all in the module. The @Component attribute can take an option providers value and you can specify what the dependencies are for the component. If you do that you do not have to declare the same service in the module as a dependency in the module.

import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html',
  providers: [DataService],

})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}

The reason you specify it at the module is to register the service in the module with the angular dependency injection framework. Otherwise you would have to do the above (register at component level) each time you want to inject that same type. By registering that type at the module level it also will inject the same instance of the service, effectively creating a singleton-like pattern.

2
  • 3
    actually, you specify it at the module to register it as a singleton, so every reference to it is the same reference Apr 27, 2018 at 15:41
  • Thanks for the answer Igor. Zapl's comment above was what I wasn't understanding: the distinction between typescript and angular roles.
    – lance-p
    Apr 28, 2018 at 12:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.