title: How to inject Renderer2 into custom service in Angular 4
body: <p>I'm trying to inject Renderer2 into my custom service and it's failing with the error as below:</p>
  
  <pre><code>ERROR Error: StaticInjectorError[Renderer2]: 
    StaticInjectorError[Renderer2]: 
      NullInjectorError: No provider for Renderer2!
  </code></pre>
  
  <p>It's a brand new angular app created using cli and my custom service I created is:</p>
  
  <pre><code>import { Injectable, Renderer2 } from '@angular/core';
  
  @Injectable()
  export class FontsService {
  
    constructor(private renderer: Renderer2) { 
      console.log(this.renderer);
    }
  
    getFonts() {
      return 'Ubuntu';
    }
  
  }
  </code></pre>
  
  <p>And app.module is very simply just providing the newly created service:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { FontsService } from './fonts.service';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [FontsService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Any help please?</p>
  
  <p>Thank you.</p>