How to use Akita with Ionic 3 and Angular 5

[alexeybondarenko]

It's not a bug or feature request. :)

I've created this issue to describe how to run Akita 3 with Angular 5 (Ionic 3). This solution works fine for me, and I would be grateful for your feedback.

The trouble is in RxJS version: Angular 5 is using RxJS@5, then Akita 3 requires RxJS@6. RxJS is a utility library, and I can use two versions for different modules at the same time. The cons are that the bundle size will increase. But I'm creating a mobile app and size is not so important as for websites.

1. We have to update .lock file to add dependency section for Akita. This change will specify rxjs version for akita.

Examples are for package-lock.json.

"@datorama/akita": {
      "version": "3.10.2",
      "resolved": "https://registry.npmjs.org/@datorama/akita/-/akita-3.10.2.tgz",
      "integrity": "sha512-R5PW/2jcasiar32z/87giWxTV6Q2O2hSDD3vVlsZNDwO1fvyae9y5el/+ED7kpsyP6m2JfcTsqEklX+vWwQCjA==",
      "requires": {
        "schematics-utilities": "1.1.2",
        "tslib": "1.9.3"
      },
      "dependencies": {
        "rxjs": {
          "version": "6.3.3",
          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz",
          "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==",
          "requires": {
            "tslib": "1.9.3"
          }
        }
      }
    }

2. We need to patch Akita bundle to use local dependency.

My builder is using fesm5 version. So I've patched node_modules/@datorama/akita/fesm5/datorama-akita.js file.

import { BehaviorSubject, of, Subject, ReplaySubject, combineLatest, from, isObservable, merge } from '../node_modules/rxjs';
import { buffer, map, tap, switchMap, distinctUntilChanged, auditTime, filter, delay, take, debounceTime, skip, pairwise } from '../node_modules/rxjs/operators';

3. Let's save the patch to apply for other collaborators https://www.npmjs.com/package/patch-package

4. After generating state module with Akita CLI you have to remove { provideIn: 'root' } from Injector declarations and add your state providers to imports. I'm creating a module for each store and I have stores.module.js that integrates them in the single module.

I'm happy that I can use Akita in my app. It's super easy to use, and I like the approach that you use creating it.

[NetanelBasal]

Thanks, looks fine to me. However, have you come across rxjs-compat? I think it might help you decrease your bundle size and save you the trouble of manually changing your package.lock.

[alexeybondarenko]

I didn't try, because It's difficult to fully migrate my app to v6. I'm using Ionic3 with Angular 5. Ionic4 uses Angular >6 and it would be easy to use Akita with it. But Ionic3 -> Ionic4 migration is too time costly (they have re-written all components from scratch and I have to re-assemble app with new components).

[NetanelBasal]

That's the whole point of the library. It provides you with the ability to have both RxJS v5 and v6 in the application.

[alexeybondarenko]

Yes, I know. But I've seen that they don't have the full compatibility using rxjs-compat. That is why I didn't even try to use it. You know, my main framework (angular) is using rxjs@5 and several libraries are using v6. I don't want to risk using v6 with rxjs-compat. As I said, bundle size is not critical for my mobile app)

[NetanelBasal]

No problem 😃. Feel free to join Akita's Gitter channel for any question you have.

[HackPoint]

@alexeybondarenko can you please share the folder structure of your project with examples in git?