schematics-utilities doesn't compatible with ng12

[m-ghaoui]

I'm submitting a...

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

Current behavior

Following the instructions in the documentation: https://datorama.github.io/akita/docs/angular/architecture but it crashes.

Expected behavior

It doesn't crash.

Minimal reproduction of the problem with instructions

1. npx @angular/cli new e-commerce
2. ng add @datorama/akita

This is the output:

ng add @datorama/akita
ℹ Using package manager: npm
✔ Found compatible package version: @datorama/akita@6.2.1.
✔ Package information loaded.

The package @datorama/akita@6.2.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
An unhandled exception occurred: Cannot find module 'bluebird'
Require stack:
- C:\Temp\e-commerce\node_modules\@schematics\update\node_modules\pacote\extract.js
- C:\Temp\e-commerce\node_modules\@schematics\update\node_modules\pacote\index.js
- C:\Temp\e-commerce\node_modules\@schematics\update\update\npm.js
- C:\Temp\e-commerce\node_modules\schematics-utilities\dist\package_update\npm.js
- C:\Temp\e-commerce\node_modules\schematics-utilities\dist\package_update\index.js
- C:\Temp\e-commerce\node_modules\schematics-utilities\dist\index.js
- C:\Temp\e-commerce\node_modules\@datorama\akita\schematics\ng-add\index.js
- C:\Temp\e-commerce\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Temp\e-commerce\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Temp\e-commerce\node_modules\@angular\cli\utilities\json-schema.js
- C:\Temp\e-commerce\node_modules\@angular\cli\models\command-runner.js
- C:\Temp\e-commerce\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\m.ghaoui\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\m.ghaoui\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\Users\M182C~1.GHA\AppData\Local\Temp\ng-pkKJez\angular-errors.log" for further details.

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

Evaluating Akita for my next project

Environment

Angular version: X.Y.Z


Angular CLI: 12.1.4
Node: 14.17.3
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.1.4
@angular-devkit/schematics      12.1.4
@schematics/angular             12.1.4
rxjs                            6.6.7
typescript                      4.3.5

Browser:
N/A

For Tooling issues:
- Node version: 14.17.3
- Platform:  Windows

Others:

[acuellarVB]

I get the same exception. Is Akita compatible with Angular 12?

[NetanelBasal]

I see the error now.

[NetanelBasal]

It's a schematics issue. You can use it without installing it with schematics for now.

[NetanelBasal]

Fixed in v6.2.3

[thoxx]

I still have this problem (with v6.2.3):

❯ npx @angular/cli new e-commerce
❯ cd e-commerce
❯ ng add @datorama/akita
ℹ Using package manager: npm
✔ Found compatible package version: @datorama/akita@6.2.3.
✔ Package information loaded.

The package @datorama/akita@6.2.3 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
An unhandled exception occurred: Cannot find module 'bluebird'
Require stack:
- /Users/xxx/dev/angular/e-commerce/node_modules/@schematics/update/node_modules/pacote/extract.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@schematics/update/node_modules/pacote/index.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@schematics/update/update/npm.js
- /Users/xxx/dev/angular/e-commerce/node_modules/schematics-utilities/dist/package_update/npm.js
- /Users/xxx/dev/angular/e-commerce/node_modules/schematics-utilities/dist/package_update/index.js
- /Users/xxx/dev/angular/e-commerce/node_modules/schematics-utilities/dist/index.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@datorama/akita/schematics/ng-add/index.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@angular/cli/utilities/json-schema.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@angular/cli/models/command-runner.js
- /Users/xxx/dev/angular/e-commerce/node_modules/@angular/cli/lib/cli/index.js
- /Users/xxx/.nvm/versions/node/v14.15.4/lib/node_modules/@angular/cli/lib/init.js
- /Users/xxx/.nvm/versions/node/v14.15.4/lib/node_modules/@angular/cli/bin/ng
See "/private/var/folders/bc/_gxct1jj67q0qt1_16glzff00000gp/T/ng-4f6M7Z/angular-errors.log" for further details.

[m-ghaoui]

Angular 12 came out 3 months ago, and the betas probably long before that. The fact that it Akita doesn't work and the fact that I'm the first one to report it tells me that you're not keeping up with the latest Angular releases.

I'm only left to conclude that either this project is dead or your attention is elsewhere. One thing is for sure, I don't think it's being used much.

I'm going to be moving on.

[NetanelBasal]

Good luck!

[ConnerEnders]

Still looks like this is an issue in v6.2.3

[NetanelBasal]

@ConnerEnders

What's the issue?

[thoxx]

@NetanelBasal This is exactly what does not work for me:

Any information or logs we can provide?

[NetanelBasal]

Maybe try deleting node_modules cache

[ConnerEnders]

Not sure if deleting the cache works, but I figured out a workaround for anyone interested.

Angular version: 12.2.2 Akita version: 6.2.3

Before using the schematic, first install Akita with npm: npm i @datorama/akita The schematic will work fine after that: ng add @datorama/akita

[shammy8]

I also needed to run npm i @datorama/akita first before running ng add @datorama/akita.

[NetanelBasal]

As you can see in my image, I just called the ng add command. If someone can share a reproduction, I'll investigate it.

[Den-dp]

To me repro is consistent (it is important to run ng add on a project without akita in node_modules).

[Den-dp]

Also, this looks not good

And according to this comment https://github.com/angular/angular-cli/issues/20685#issuecomment-831767467 may not be fixed soon.

Maybe instead of schematics-utilities we can try something more lightweight like 🤔 https://github.com/TinkoffCreditSystems/ng-morph

[plamenNachevICB]

It's weird that I didn't have a problem with angular 12, but with 13 now I can't use the CLI because of this.

[Den-dp]

@plamenNachevICB I think that this particular issue is related only to cases when ng add @datorama/akita is called on an ng12 project that doesn't have akita in node_modules (first installation).

[danhobbs75]

Hello. Does anyone have a long-term solution to this? I upgraded to Angular 13 over Christmas, and Angular CLI schematics are working fine, it's just the Akita schematics that fail with this error:

NOT SUPPORTED: keyword "id", use "$id" for schema ID

I've read around and it seems to be the dependency on the old version of Angular/schematics (v8.3.29) which comes via schematics-utilities (v2.0.3). I've tried using aliases and having those versions installed as well, but I'm not adept enough at sorting out version conflicts to solve it, unfortunately. (I did also try uninstalling and re-installing Akita and akita-cli but that didn't change anything.)

Is it the sort of thing I just need to wait for and when dependencies are updated on the Akita projects, it will all start working again?

In the meantime, Akita (which I absolutely love) is working fine itself. It's just the schematics to scaffold a new entity/service/query/store which doesn't work, and I am working around that by copying and pasting from existing code.

Or should I be looking at Elf now because Akita won't be maintained long-term?

Thank you for giving us Akita in any case - a fantastic framework for someone like me who is relatively new to Angular development.

[NetanelBasal]

@danhobbs75 Update Akita to the latest version.

[plamenNachevICB]

I've been trying every update since the issue occurred. Last month I updated to the latest version 7.0.1. That didn't fix it for me.

[shammy8]

I'm guessing you guys have already tried this. This worked for me awhile back

Before using the schematic, first install Akita with npm: npm i @datorama/akita The schematic will work fine after that: ng add @datorama/akita

[danhobbs75]

Thanks for the replies, everyone. @NetanelBasal I am on Akita v7.0.1, and @shammy8 I did try exactly that step - no change for me. I must be doing something else wrong. If I find out what it is that's wrong in my setup, I will report back here, @plamenNachevICB.

[danhobbs75]

OK, I have worked this out. I did it by actually reading what @NetanelBasal said (possibly elsewhere) about how the schematics are now built in to @datorama/akita now and akita-schematics was deprecated.

I was using this command:

nx g akita-schematics:feature feature-name --project=whatever

and I should have been using this:

nx g @datorama/akita:feature feature-name --project=whatever

I couldn't use the abbreviated af schematic name because I already have another default builder in place for my Tailwind/PostCSS stuff and I'm NOT messing with that. :-D

THANK YOU.

Akita was still a wonderful gift anyway, but this makes my life easier again to have solved this.

[yonzmeer]

I have a 13.9.2 nx workspace with datorama/akita@7.1.1. When running npm install I get an old @angular-devkit/schematics in my node_modules (version 8.3.29). This causes every nx g @nrwl/angular:application to be configured with an old schema.

[dmauldin]

Just wanted to chime in to note that this is till an issue. I had to find this issue and follow others recommendations to figure out that in order for akita to not break all of my schematics, I needed to npm i @datorama/akita first, then ng add @datorama/akita. If you do not first install akita, then adding it via ng add will prevent you from using any schematics, including the base Angular generators.

[Den-dp]

@dmauldin please note that running ng add @datorama/akita will install Akita version 7.1.1, which is the last version compatible with schematics, but not the latest npm release (which is 8.0.1)

This is because the schematics support was removed in 8.0.0 https://github.com/salesforce/akita/blob/master/packages/akita/CHANGELOG.md#800-2023-01-09

Cause of that, we probably should get rid of the recommendation to use ng add @datorama/akita from the docs

[kurtiev]

For me was helpful to remove from angular.json next lines:

  "cli": {
    "defaultCollection": "@datorama/akita"
  },

[brice-noowu]

@dmauldin please note that running ng add @datorama/akita will install Akita version 7.1.1, which is the last version compatible with schematics, but not the latest npm release (which is 8.0.1)

This is because the schematics support was removed in 8.0.0 https://github.com/salesforce/akita/blob/master/packages/akita/CHANGELOG.md#800-2023-01-09

Cause of that, we probably should get rid of the recommendation to use ng add @datorama/akita from the docs

So from version 8.0.0, it's not possible to use the schematics anymore ? Why so ? It's so useful to be able to quickly generate boilerplate from console

[derHodrig]

While akita does many things right, angular is still a huge headache after updates... while recommending akita, i would more recommend vue or react, since they got that built in.

How come, that this problem is still there, but the issue is closed?

npm i @datorama/akita before ng add @datorama/akita still brings the issue

The "@datorama/akita" package does not support Nx generators. and can not used. the old docs with the different generators are gone... So in fact "use angular, its more reliable, the community is very active" does not feel that good. Sad to see, how this ends, since Nbasal did a huge step forward with that akita state management. Is way more usable than plain rxjs

[Den-dp]

How come, that this problem is still there, but the issue is closed?

@derHodrig It is closed because the schematics support (ng add, ng g af) was dropped in the new versions (as we found).

@NetanelBasal hi! Can you recall what was the reason for removing schematics support? Were you trying to reduce the surface to maintain, or was it something else?

Trying to understand if it makes sense to try reviving schematics back, or we should go another way and clean up all occurrences of ng add and ng g af from the docs (probably even add a disclaimer not to use it 🤔).