$templateCache / $cacheFactory en Angular moderno

$templateCache ya no hace falta: los templates se compilan dentro del bundle de JavaScript en el build. El almacenamiento en caché de datos con $cacheFactory se muda a los servicios.

Antes · AngularJS

app.run(function ($templateCache) {
  $templateCache.put('user-card.html',
    '<div class="card">{{ vm.user.name }}</div>');
});

app.factory('CountryService', function ($http, $cacheFactory) {
  var cache = $cacheFactory('countries');
  return {
    list: function () { return $http.get('/api/countries', { cache: cache }); }
  };
});

Después · Angular

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html', // compiled at build time
})
export class UserCardComponent { user = input.required<User>(); }

@Injectable({ providedIn: 'root' })
export class CountryService {
  private http = inject(HttpClient);
  private countries$ = this.http.get<Country[]>('/api/countries')
    .pipe(shareReplay(1));

  list() { return this.countries$; }
}

Qué cambia

Los archivos de templateUrl los compila el build; desaparece el paso de html2js o gulp que llenaba $templateCache.
$http con la opción cache pasa a ser shareReplay sobre el observable, o un interceptor cuando muchos endpoints necesitan la misma política.
$cacheFactory usado como almacén clave-valor pasa a ser un Map dentro de un servicio.

Consejo de migración. Decide cuándo se invalida cada caché antes de portarlo. Muchos cachés de $cacheFactory no tenían invalidación y servían datos viejos hasta recargar la página.

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