Akita: Akita devtools doesn't work in v5

[NetanelBasal]

@xbaun I think your recent changes cause issues

[NetanelBasal]

First, we need to add the forRoot. When we do so, the devtools function is called, but we don't enter $$addStore.subscribe.

[NetanelBasal]

For others that need the devtools, a workaround, for now, is to import akitaDevtools in main.ts.

import { akitaDevtools } from '@datorama/akita';

akitaDevtools();

[xbaun]

The problem is that devTools.init() is not called because DevTools dispatches START instead.

[NetanelBasal]

It worked before, what's happened?

[NetanelBasal]

and why it works when we don't use the module?

[xbaun]

I think a devTools.init() is missing in some other place. I'm gonna go check it out, but if I remember correctly, I haven't touched this.

[xbaun]

It's the same problem as https://github.com/datorama/akita/issues/459: The akita-ngdevtools package has a dependency to akita of its own, so messages for DevTools get dispatched to an instance of a different package.

When using akitaDevtools() as a workaround from the akita package itself, all dispatch/subscribe operations are using the same object from the akita package, without using akita-ngdevtools.

npm show @datorama/akita-ngdevtools 

@datorama/[email protected] | Apache-2.0 | deps: 1 | versions: 14
Akita integration for Redux dev-tools chrome extension
https://github.com/datorama/akita/tree/master/libs/akita-ng-devtools#readme

keywords: angular, akita, akita devtools, devtools

dist
.tarball: https://registry.npmjs.org/@datorama/akita-ngdevtools/-/akita-ngdevtools-5.0.1.tgz
.shasum: ca98ce6fefc9170227dbf3940345726ff3c9d7a9
.integrity: sha512-uefwx+CJCIzNPzOMzvDjCLh7kYQQ5g3GeOKY0B/8pM4N5s5krUukvzCBEBkk+Ug/lma4LekPZpay6GuhPQNhpw==
.unpackedSize: 83.5 kB

dependencies:
@datorama/akita: 5.0.3 

[xbaun]

The docs need also a fix: .forRoot() is missing.

import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';

@NgModule({
  imports: [environment.production ? [] : AkitaNgDevtools.forRoot()]
  bootstrap: [AppComponent]
})
export class AppModule {}

[mhosman]

Not working for me with .forRoot(). Just with the @NetanelBasal main.ts workaround. Anyway, with this workaround, the AkitaNgRouterStoreModule is not working.

[xbaun]

@mhosman The .forRoot() is always required for @datorama/akita-ngdevtools . Currently, it does not work because there is a dependency problem that affects all other packages.

@NetanelBasal A fix would be to declare akita as a peerDependency for all akita libraries. Nx then skips the generation of an explicit dependency entry in package.json.

[NetanelBasal]

@xbaun I removed the --with-deps flag. I don't know what it was added again. Thanks for the help.

[NetanelBasal]

Fixed in akita-ngdevtools v5.0.2.

[xbaun]

When I run nx build akita-ng-devtools --prod (and omit --width-deps flag), a dependency entry is always generated in the package.json lib. If I understand --width-deps correctly (which isn't well documented) the flag only ensures that dependent projects are built in the right order.

I looked at the source code of NX and stumbled upon this code line: https://github.com/nrwl/nx/blob/7301930d3d4df16b444ced2b46ae7f18cd45e7aa/packages/workspace/src/utils/buildable-libs-utils.ts#L266. Apparently the generation of a dependency entries is only omitted if the project dependency is specified as peerDependecy in package.json.

...or maybe I'm just misunderstanding something here :grimacing:

[NetanelBasal]

This is the only package that does this. In the others, we don't specify Akita as peer dependency, and it doesn't add it as a dependency when we build it. When I have time, I will check why the devtools package is different.

[xbaun]

Currently, the other akita lib packages have the same dependency to akita set:

$ npm show @datorama/akita-ng-router-store dependencies version
dependencies = { '@datorama/akita': '5.0.3' }
version = '5.1.4'

```bash
$ npm show @datorama/akita-ng-entity-service dependencies
dependencies = { '@datorama/akita': '5.0.3' }
version = '5.0.1

```bash
$ npm show @datorama/akita-ng-forms-manager dependencies version
dependencies = { '@datorama/akita': '5.0.3' }
version = '5.0.1'

I suppose it causes similar problems as the last two issues, as @mhosman states above for @datorama/akita-ng-router-store.

[NetanelBasal]

That's weird. Ok, I'll just add Akita as a peer dependency.

[mhosman]

Any news on this? Is still not working!

[xbaun]

In the latest version this issue should be fixed. I did a quick test and devtools worked correctly.

[mhosman]

Sorry but is not working for me. I'm using the latest version of Akita, latest version of AkitaNgDevtools, and latest version of AkitaNgRouterStoreModule with Angular 10. The DevTools just doesn't work.

[xbaun]

Can you please provide a code sample to reproduce this. I also tested ng 10 and it worked.

[mhosman]

Hey @xbaun thanks for the response. I tested AkitaNgDevtools with .forRoot() and worked so maybe it could be great to add that change in the docs. Thanks!!

[xbaun]

No problem, glad I could help. The docs are already updated 😄

[mhosman]

@xbaun it's not updated 😆

https://datorama.github.io/akita/docs/angular/router

[xbaun]

Oh you are right 😁 I only checked https://datorama.github.io/akita/docs/enhancers/devtools/#usage. @NetanelBasal fyi, a forRoot is still missing in the docs.

[NetanelBasal]

@xbaun where it's missing?

[xbaun]

@xbaun it's not updated 😆

https://datorama.github.io/akita/docs/angular/router

DevTools are used in the router documentation and there is forRoot missing in the example of app.module.ts.

[field123]

I don't know the difference between the docs at https://netbasal.gitbook.io/akita/enhancers/devtools and https://datorama.github.io/akita/docs/enhancers/devtools/ but the gitbook.io is showing

Find the multiple docs a little confusing. But adding .forRoot() solved my issue. Thanks.

[NetanelBasal]

@field123 netbasal.gitbook.io/akita/enhancers/devtools is deprecated.