Carlos Cifuentes
Referencia AngularJS → Angular

$window / $document en Angular moderno

$document pasa a ser el token DOCUMENT. Angular no trae un token para window, así que defines uno pequeño o llegas a window mediante document.defaultView.

Antes · AngularJS
app.service('ScrollService', function ($window, $document) {
  this.toTop = function () { $window.scrollTo(0, 0); };
  this.setTitle = function (title) { $document[0].title = title; };
  this.width = function () { return $window.innerWidth; };
});
Después · Angular
export const WINDOW = new InjectionToken<Window | null>('WINDOW', {
  providedIn: 'root',
  factory: () => inject(DOCUMENT).defaultView,
});

@Injectable({ providedIn: 'root' })
export class ScrollService {
  private window = inject(WINDOW);
  private title = inject(Title);

  toTop() { this.window?.scrollTo(0, 0); }
  setTitle(title: string) { this.title.setTitle(title); }
  width() { return this.window?.innerWidth ?? 0; }
}

Qué cambia

  • inject(DOCUMENT) devuelve el documento directamente, sin el envoltorio jqLite ni el [0].
  • Un InjectionToken WINDOW mantiene el acceso a window reemplazable en pruebas, como lo hacía $window.
  • Los servicios Title y Meta reemplazan la escritura directa en document.title y en las etiquetas meta.

Consejo de migración. El código legacy muchas veces se salta $window y usa window, localStorage o document directamente. Busca esos usos también y pásalos por tokens, sobre todo si el renderizado en servidor está en los planes.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn