luckyseven / ngx-liquid-cache Goto Github PK
View Code? Open in Web Editor NEWA powerful, automatic and optimized Angular2/10+ cache system that fits everywhere!
License: MIT License
A powerful, automatic and optimized Angular2/10+ cache system that fits everywhere!
License: MIT License
Any way to make it work with production build ?
Works fine with --optimization=false, but with optimization enabled I always get the same result, the one thats fetched first.
This is how I typicaly use it
@LiquidCache('getPositionsList{Fk_Partner}{dateStr}', { duration: 60 * 2 })
My guess is the optimization process changes the input parameters names
Allow users to set cache prefix - While localStorage is unique per domain, the same domain may serve multiple different Angular apps. By allowing users to select their own cache prefix, conflicts can be avoided.
Perform local storage lookup on get()
- This will allow the cache to stay in sync across tabs/windows.
Perform local storage lookup on has()
- Same as above. Maintain a consistent cache across tabs/windows
Fire side-effects on tap - Improved readability.
map(results => {
DecoratorLiquidCacheService.cacheService.set(parsedKey, results, configuration);
return results;
}
tap(results => DecoratorLiquidCacheService.cacheService.set(parsedKey, results, configuration))
We are using Angular 11.0.3 and making extensive use of placeholders which work when running locally with optimization set to false, however Liquid Cache does not work with optimization set to true.
According to the documentation it implies that this should work for Angular versions 10+ can you confirm if it should work with V11 of Angular with optimization enabled please? It's not really option for us to run without optimization enabled on production.
TypeError: Cannot read property 'has' of null
at IndustryDataApiService.descriptor.value (D:\Development\Java\IndustryManager\node_modules\ngx-liquid-cache\bundles\ng:\ngx-liquid-cache\lib\services\liquid-cache.service.ts:165:58)
at D:\Development\Java\IndustryManager\src\app\services\industry-data-service\industry-data.service.spec.ts:132:15
Trying to write tests with LiquidCache annotation on a function is returning this error. I may be missing something in my configuration, or mocking?
IndustryDataApiService looks like this:
@Injectable()
export class IndustryDataApiService extends IndustryDataService {
constructor(
private http: HttpProvider,
private environmentConfig: EnvironmentConfigService,
private cacheService: LiquidCacheService,
private featureToggleService: FeatureToggleService,
) {
super();
}
@LiquidCache('carTypes', {duration: 300})
getAllCarTypes(): Observable<CarType[]> {
if (!this.featureToggleService.isActive('retrieveCarTypes')) {
const carTypesDataArray: CarType[] = [boxcar, flatcar];
return this.getObservable<CarType[]>(carTypesDataArray);
}
const allCarTypes = this.http.getAll<CarType>(
this.environmentConfig.carTypeGetAllApiUrl(),
);
return allCarTypes;
}
}
Test looks like this:
describe('CarType Data', () => {
const carTypesReturned: CarType[] = [boxcar, flatcar];
it('should return getAllLocations data from API', (done) => {
when(mockHttpProvider.getAll<CarType>(anyString())).thenReturn(of(carTypesReturned));
// ERROR OCCURS WHEN CALLING THE FOLLOWING LINE
service.getAllCarTypes().subscribe((response: CarType[]) => {
expect(response).toEqual(carTypesReturned);
done();
});
});
});
I can get the code working if I pass in the LiquidCacheService
and write the caching code manually, but I'd rather not.
Any ideas?
Could not install the library:
npm i --save ngx-liquid-cache
Error:
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"12.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^6.0.0-rc.0 || ^6.0.0" from [email protected]
npm ERR! node_modules/ngx-liquid-cache
npm ERR! ngx-liquid-cache@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.