title: Error: NO Provider for Renderer2! Angular v 4.1.3
body: <p>I am currently refactoring one of my services that broke on upgrade. I had to replace browserdomadapter(); and a few other deprecated methods.</p>
  
  <p>Because of the various deprecations coming from 2.1ish and the various breaking changes, I had to change the way we deliver this particular service to the component. I am now injecting it directly onto the component, which I saw in various answers(by angular devs) is recommended practice.</p>
  
  <p>here is the error:</p>
  
  <p><a href="https://i.stack.imgur.com/aUpkD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aUpkD.png" alt="enter image description here"></a></p>
  
  <p>The problem is I am already referencing the injected service in the component on providers, as you can see below on the relevant code:</p>
  
  <pre><code>import {Location} from "@angular/common";
  import {Component, Injectable, Renderer2, Inject} from "@angular/core";
  import {SerieService} from "../shared/services/serie.service";
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { CategoryService } from "../shared/services/category.service";
  import {Router, ActivatedRoute, RouterModule, NavigationEnd} from "@angular/router";
  
  import {Http, HttpModule} from "@angular/http";
  import {PageviewService} from "../shared/services/pageview.service";
  import {Title, DOCUMENT} from '@angular/platform-browser';
  import {SeoService} from '../shared/services/seo.service';
  
  @Injectable()
  export class Service {
  
  
  private metaDescription: HTMLElement;
  
  private headElement: HTMLElement;
  
  private robots: HTMLElement;
  
  
  
  constructor(@Inject(DOCUMENT) private document: any, private r: Renderer2, private titleService: Title){
  this.headElement = this.document.head;
  this.metaDescription = this.getOrCreateMetaElement('description');
  
  }
  
   public setMetaDescription(description: string) {
    this.r.setAttribute(this.metaDescription, 'content', description)
   }
  
   public setMetaRobots(robots: string) {
    this.r.setAttribute(this.robots, 'content', robots);
   }
  
   public setTitle(newTitle: string) {
    this.titleService.setTitle(newTitle + ' | Stareable');
   }
  
   private getOrCreateMetaElement(name: string): HTMLElement {
       let el: HTMLElement;
       el = this.document.querySelector('meta[name=' + name + ']');
       if (el === null) {
           el = this.document.setAttribute('meta');
           this.headElement.appendChild(el);
       }
       return el;
     }
  
   }
  
  
  
  
   @Component({
     inputs: ['category'],
     templateUrl: './categories.component.html',
     styleUrls: ['./categories.component.scss'],
     providers: [ Service ]
   })
  
  export class CategoriesComponent {
  
    public category: string;
    public seriesList: any;
    public message: string;
    public loading: boolean;
    public errorMessage: string;
  
    private slug:string;
  
   constructor (
     private service: Service,
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
     private _categoryService: CategoryService,
     private _seriesService: SerieService,
     private _pageviewService: PageviewService,
     private location: Location,
     private _httpService: Http,
     private seoService: SeoService
    ) {
     this._router.events.subscribe((event) =&gt; {
      if (event instanceof NavigationEnd){
          //TODO: FIX TO RECOGNIZE PREVIOUS ROUTE -- THIS WILL CAUSE DUPLICATE REQUESTING URL
          let slug = this._activatedRoute.snapshot.params['slug'];
          this.slug = slug;
          this.category = this._activatedRoute.snapshot.params['slug'];
          this.getSeriesList(slug, null);
       }
    })
  }
  
  ngOnInit(){
    let slug = this._activatedRoute.snapshot.params['slug'];
    this.loading = true;
    this.category = this._activatedRoute.snapshot.params['slug'];
    this.getSeriesList(slug,"title");
    this.service.setTitle(slug);
    this.service.setMetaDescription(slug);
    this.service.setMetaRobots('Index, Follow');
  
  
   this._pageviewService.addPageview(
   this.location.path(),"CATEGORY",slug,null)
      .subscribe(res =&gt; {},err =&gt; {});
  }
  
  getSeriesList(slug, order_by) {
      this._categoryService.getSeriesByCategory(slug, order_by)
      .subscribe(
          seriesList =&gt; this.seriesList = seriesList,
          error =&gt;  this.errorMessage = &lt;any&gt;error);
  }
  
   onReShuffle(order_by:string){
       this.loading = true;
  
  
  
  
  
    this._categoryService.getSeriesByCategory(
    this._activatedRoute.snapshot.params['slug'], order_by)
      .subscribe(
          seriesList =&gt; {
              this.seriesList = seriesList;
              this.loading = false;
          },
          error =&gt;  this.errorMessage = &lt;any&gt;error);
  
   }
  
   openPlaylistModal(series) {
     // todo: open modal and pass series
     console.log(series);
     return
   }
  
   loadMore() {
     this._httpService.get(this.seriesList.next_url)
      .subscribe((res) =&gt; {
          var results = res.json();
          this.seriesList.result = t 
          this.seriesList.result.concat(results.result);
          if(results.next_url){
              this.seriesList.next_url = results.next_url;
          }
          else {
              this.seriesList.next_url = false;
          }
      });
    }
  }
  </code></pre>
  
  <p>Not sure what I am doing wrong. Is there some other way to do this, that I am not aware of?</p>