title: How to specify a provider in a service in Angular?
body: <p><a href="https://angular.io/guide/dependency-injection" rel="nofollow noreferrer">https://angular.io/guide/dependency-injection</a></p>
  
  <blockquote>
    <p>A provider tells an injector how to create the service. You must configure an injector with a provider before that injector can create a service (or provide any other kind of dependency).</p>
  </blockquote>
  
  <p>This code is also from that link:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HEROES } from './mock-heroes';
  
  @Injectable({
    // we declare that this service should be created
    // by the root application injector.
    providedIn: 'root',
  })
  export class HeroService {
    getHeroes() { return HEROES; }
  }
  </code></pre>
  
  <p>Here 'root' is the injector. Who is the provider?</p>
  
  <blockquote>
    <p>The @Injectable() decorator has the providedIn metadata option, where you can specify the provider of the decorated service class with the root injector, or with the injector for a specific NgModule.</p>
  </blockquote>
  
  <p>In my code I have directly imported a service as follows and injected it in the constructor:</p>
  
  <pre><code>import { BlogContentsService } from '../blog-contents.service'
  
  ...
  
  constructor( private objBlogContentsService: BlogContentsService)
  { 
  }
  </code></pre>
  
  <p>This is working properly. I haven't specified any provider anywhere.</p>
  
  <p>How do I specify a provider here? Why is it working without me specifying a provider in my class?</p>
  
  <p>In my <code>app.module.ts</code>, </p>
  
  <pre><code>@NgModule({
    declarations: 
    [
      AppComponent,
      TitleBodyFormComponent,
      DashboardComponent,
      MyElseDirective,
      ElseDirective,
      WhitespaceValidatorDirective    
    ],
    imports: 
    [
      BrowserModule,
      AppRoutingModule,
      // ------ Added by me for reactive forms:
      ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p><code>providers:[]</code> list is empty.</p>