NullInjectorError: No provider for Renderer2! en un Service de Angular

Si intentamos manipular el DOM desde un servicio de Angular (a sabiendas que no es aconsejado según las convenciones de Angular) es posible que nos salte el error:

NullInjectorError: No provider for Renderer2

Si queremos romper las «reglas» y acceder al DOM podemos hacer una truquito mientras Angular arregla el issue (https://github.com/angular/angular/issues/17824)

Lo que podemos hacer es inyectar en el constructor «RendererFactory2» y asignar en el constructor el «rendererFactory» inyectado a la propiedad «_renderer2» que anteriormente hemos inicializado.

El ejemplo entero:

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AccesoDomDesdeService {

  private _renderer2: Renderer2

  constructor(
    rendererFactory: RendererFactory2,
  ) { 
    this._renderer2 = rendererFactory.createRenderer(null, null)
  }

}

Y ya podríamos utilizar el «_renderer2» para acceder al DOM perfectamente.


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*