title: Service: No provider for Renderer2
body: <p><code>Angular 4.2</code> with <code>Typescript 2.3</code></p>
  
  <p>I am refactoring a service that is responsible for creating a new script tag and adding it to the document.</p>
  
  <p>Here is the old code:</p>
  
  <pre><code>loadScript(src:string){
      const script = document.createElement('script');
      document.body.appendChild(script);
      script.src = src;
  }
  </code></pre>
  
  <p>Now, I'd like to use the <code>Renderer2</code> to avoid doing direct DOM manipulation. So I've injected what I need in my service and updated the code:</p>
  
  <pre><code>constructor(private renderer:Renderer2, @Inject(DOCUMENT) private document){}
  
  loadScript(src:string){
      const script = this.renderer.createElement('script');
      this.renderer.appendChild(this.document.body,script);
      script.src = src;
  }
  </code></pre>
  
  <p>However, I run into this error:</p>
  
  <blockquote>
    <p>Error: no provider for Renderer2!</p>
  </blockquote>
  
  <p>The service belongs to a <code>CoreModule</code> whose only import is <code>CommonModule</code> from <code>@angular/common</code> </p>
  
  <p><a href="http://plnkr.co/edit/MpsFO4E0EkKYuyKUh328?p=preview" rel="noreferrer">This plunkr</a> demonstrates the problem</p>