typescript - Using Renderer in Angular 4 -

i understand why it's better use renderer instead of directly manipulating dom in angular2 projects. however, have uninstalled, clear cache, reinstalled node, typescript , angular-cli several times , still error when trying inject renderer.

import { injectable, renderer2 } '@angular/core'; constructor(private renderer: renderer2) {} 

__zone_symbol__message: "no provider renderer2!"

__zone_symbol__stack:"error↵ @ error.zoneawareerror

does have ideas doing wrong?

according imports

import { injectable, renderer2 } '@angular/core' 

i suspect you're trying inject renderer2 in service class. won't work. can't inject renderer2 in service. should work components , services provided within component.

we can take @ source code https://github.com/angular/angular/blob/4.0.1/packages/core/src/view/provider.ts#l363-l373

while (view) {   if (eldef) {     switch (tokenkey) {       case rendererv1tokenkey: {         const compview = findcompview(view, eldef, allowprivateservices);         return createrendererv1(compview);       }       case renderer2tokenkey: {         const compview = findcompview(view, eldef, allowprivateservices);         return compview.renderer;       } 

it checks within element injector tree. , there no other places when token can provided

so have pass renderer2 component service when you're calling service method https://github.com/angular/angular/issues/17824#issuecomment-311986129

or can provide service within component

@injectable() export class service {   constructor(private r: renderer2) {} } @component({   selector: 'my-app',   templateurl: `./app.component.html`,   providers: [service] }) export class appcomponent {    constructor(private service: service) {} }