Update docs on how to configure cashew in module based Angular app

[Waterstraal]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

It seems that v4 dropped support for module based apps: 3e92e8e

It does not expose HttpCacheInterceptorModule and useHttpCacheLocalStorage anymore. And the docs have been updated on how to use cashew in standalone Angular apps. There are no docs on how to use cashew in non-standalone apps.

Expected behavior

The docs describe how to use cashew in non-standalone module based angular apps.

What is the motivation / use case for changing the behavior?

Many (most?) Angular apps are not standalone and therefore they should be supported.

Environment

@ngneat/cashew 4.0.0

[Andrew-Marks-Trisept]

I was caught off-guard by this, too. Luckily, it seems Cashew 3.1.0 is still working in Angular 17, despite what the compatibility matrix says.

I don't plan to switch my app to all standalone components as we are doing a lot of lazy-loading with modules.

[laverix]

Yeah, can you help make it work in module-based apps? I think the vast majority of Angular apps are module-based

[asfo]

To be honest, this is too simple, Angular 18 is almost the same, you just need to add the same to the Module.Providers array and that's it.

It could be included, but in general is not needed as if you have worked with Module-based and you have updated to use provideHttpClient() then you don't need that info

[baloo32]

As I was also having issue upgrading, after a lot of fiddling and Googling, this seems to work in my non-standalone module Angular 20 app.

Ensure latest verison is added to package.json > "@ngneat/cashew": "5.0.0"

Edit app.module.ts and ensure following imports are added:

import {
	HTTP_INTERCEPTORS,
	provideHttpClient,
	withInterceptorsFromDi,
	withInterceptors
} from '@angular/common/http';

import { provideHttpCache, withHttpCacheInterceptor } from '@ngneat/cashew';

In the @NgModule section, in the imports array, remove the references to HttpCacheInterceptorModule:

imports: [
		SharedModule.forRoot(),
		//HttpCacheInterceptorModule.forRoot(), // Cashew Caching v3
		AppRoutingModule,
		...

In the providers array, add the new references for provideHttpClient and provideHttpCache:

providers: [
		...
		provideHttpClient(withInterceptorsFromDi(), withInterceptors([withHttpCacheInterceptor()])),
		provideHttpCache(),
	],

You may not need withInterceptorsFromDi() if you are not using the legacy mode class-based interceptors.

You can then import the required options in your service as import { withCache, CacheBucket, HttpCacheManager } from '@ngneat/cashew';, e.g.:

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { withCache, CacheBucket, HttpCacheManager } from '@ngneat/cashew';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ConfigService {
	private configBucket = new CacheBucket();

	constructor(
		private http: HttpClient,
		private manager: HttpCacheManager,
	) {}

	getUserConfig(): Observable<any> {
		return this.http
			.get(`/mycachedcontent`, {
				context: withCache({
					bucket: this.configBucket,
				}),
			})
			.pipe(
				catchError((error) =>
					observableThrowError(error.error || 'Server Error'),
				),
			);
	}
}

Hope this helps...