Implemented Storage Strategies

[angelnikolov]

Hey all, after some discussions in https://github.com/angelnikolov/ngx-cacheable/pull/32 led by @kaiser-raja, I figured that it would be nice to abstract away the caching strategy from the decorators so we can create new strategies.

Details

Before, both the Observable and Promise decorators were caching in-memory only. Now, there's another browser-only caching strategy called DOMCachingStrategy which will use localStorage to persist the data. This means that you can simply provide that strategy to your decorators with a couple of lines:

import { GlobalCacheConfig } from '@ngx-cacheable'; 
import { DOMStorageStrategy } from '@ngx-cacheable/common/DOMStorageStrategy'; 
GlobalCacheConfig.storageStrategy = DOMStorageStrategy;

And that's it, from then on, your decorators will be caching in localStorage and all other cache config options will still work. Also, you can specify the caching strategy on a decorator basis, so if you want a different strategy for one decorator only, just provide it via the cacheConfig object like:

@Cacheable({
    storageStrategy: customCachingStrategy
})

Custom Strategies

It's also really easy to implement your own caching strategy, by implementing the IStorageStrategy interface. Right now, we only support synchronous strategies since adding async strategies to the mix will require a large refactor of both decorators. I will most probably add async strategies for the Promise decorator, since it's highly likely that only it will be used with async caching like Redis, FileSystem or databases anyway. This also adds the noImplicitAny option to the tsconfig.json so now there are no implicit any inferences in the code base as required here.

Work left here:

• [x] Update documentation
• [x] Add more tests for adding storage strategies to specific decorator instances

[kaiser-raja]

@angelnikolov Great work, man! This looks awesome, much better implemented than what I had got going. Thanks. :)

[kaiser-raja]

@angelnikolov This check in DOMStorageStrategy.ts is throwing error when I am trying to use ngx-cacheable in my project: if (typeof localStorage == 'undefined') { throw new Error('Platform not supported.') } The error happens during the running of the mocha tests. Is this check necessary? Can you please remove it?

[angelnikolov]

This check is added so people don't try to use the LocalStorage strategy on the server where there isn't such a thing. Can you tell me more about your tests? Are those client-side tests?

[kaiser-raja]

@angelnikolov These are unit tests using web mocha intended to test out UI components built using Angular 5. The tests are running when the build is being deployed on a Jenkins server. So basically this error occurs during the running of a Jenkins build. How do you propose we get around this error when the test cases are being loaded? The error occurs even before the test cases have started running. It basically occurs while it's building up the test suite.

These are unit test cases. When web-mocha starts to initialize every thing (node_modules, other config files) and when it starts to run tests it throws error. No test cases fail but it stops test execution.

[angelnikolov]

Hm, that's weird. I wonder how a runtime error occurs during buildtime? Can you show me the error?

[kaiser-raja]

It is definitely weird. Here is a screenshot of the error

[angelnikolov]

This is a runtime error. Can you check if this doesn't help you?

[kaiser-raja]

Thanks a lot, man! That did indeed work. Appreciate all the help!