Angular 5 -> providers in Component

Question

I have a question to Angular 5 Components, My Component looks like this:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AuthService } from './../auth/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [FormBuilder, AuthService]  // is this line needed?
})
export class LoginComponent implements OnInit {   

  constructor(private fb: FormBuilder, private authService: AuthService) { } 

  ngOnInit() {
  }
}

Without the line providers: [FormBuilder, AuthService] I geht the following exception:

NullInjectorError: No provider for FormBuilder!

If I add providers: [FormBuilder, AuthService] then all works fine. My question now would be if this line is really necessary because I saw Components in a tutorial without the line providers: [FormBuilder, AuthService] (e.g. Creating the Login component)

Yes, since you are injecting them in your constructor. You can also add them in your module's providers, then you dont need to provide them in every component. — FAISAL, Feb 20 '18 at 08:23
https://stackoverflow.com/questions/37867503/what-are-providers-in-angular2 — Ramesh Rajendran, Feb 20 '18 at 08:28

score 3 · Accepted Answer · answered Feb 20 '18 at 08:26

3

So the main difference is that you are injecting it into your component, where the tutorial is injecting it into the module.

Like the following example of the AppModule:

import { AuthService } from './../auth/auth.service';
import {FormsModule } from "@angular/forms";

@NgModule({
    modules: [
        FormsModule
    ],
    providers: [
        AuthService
    ]
})
export class AppModule { }

You can see the differences in the way it is injected here: https://stackoverflow.com/a/42562446/3329836

answered Feb 20 '18 at 08:26

Jamie Rees

7,973
2
45
83

No I see! Thanks a lot! – quma Feb 20 '18 at 08:51
5

To clarify, it is not a matter of "injecting it into your component" vs. "injecting it into the module". In both cases, you are injecting the service into the component. The difference is that in one case, you are providing the service from the component's local injector, and in the other, you are providing the service from the module's injector. When providing from the module, there will be one instance of the service for all who inject it, when providing from the component, each component instance will get it's own instance of the service. – GreyBeardedGeek Jun 28 '18 at 15:26

score 0 · Answer 2 · answered Feb 20 '18 at 08:24

If you don't want to define provider (your service) in the component, you should to add this to providers section in your module

HERE the overview

In the lesson via your link, author used ng for generating components, services and so on, so there it creates following structure (with providers defined at module level) automaticaly.

score 0 · Answer 3 · answered Feb 20 '18 at 08:28

0

No, you dont need that line, you can add providers to the same module that your component belongs to and inject the services via constructor.

answered Feb 20 '18 at 08:28

Fran

521
4
20

Angular 5 -> providers in Component

3 Answers3