Nx: All usages of DataPersistence are broken after upgrading to version 8

[jasedwards]

_Please make sure you have read the submission guidelines before posting an issue_

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• [x ] I am running the latest version
• [ x] I checked the documentation and found no answer
• [x ] I checked to make sure that this issue has not already been filed
• [ x] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

DataPersistence functions should run as before

Current Behavior

A giant confusing error is thrown (just took as much of screen shot as possible. I have about 100 usages and they are all in error).

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.
Here is an example though there are many flavors

loadWidgetData = this.dataPersistence.fetch(LOAD_WIDGETS_FOR_DASHBOARD, {
    run: (action: LoadWidgetsForDashboard, state: WidgetsState) => {
      return action.payload
        ? this.service.fetchWidgetsWithLayout(action.payload).pipe(
            map(result => ({
              type: DASHBOARD_WIDGETS_LOADED,
              payload: {
                messages: result.widgets,
                layoutConfig: result.layoutConfig,
                layout: result.layout,
                parentDashboardId: action.payload
              }
            }))
          )
        : null;
    },

    onError: (action: LoadWidgetsForDashboard, error) => {
      console.error('Error', error);
    }
  });

Context

Please provide any relevant information about your setup:

I just ran ng update.

I know that error screen shot may not be very helpful but I did not see anything in migrations that would give me a hint as to what has changed. Was anything changed that would cause this issue? It broke for every single usage.

[FrozenPandaz]

These errors are from the migration? If so, can you please provide a repro of the un-migrated project?

DataPersistence has moved to @nrwl/angular but imports should have been migrated. Implementation has not changed.

[FallenRiteMonk]

I have the same problem, but all my DataPersistence imports have been migrated correctly.

What I find very confusing is the last line of the error message I get:

Type 'import("<PROJECT_PATH>/node_modules/rxjs/internal/Observable").Observable<any>' is not assignable to type 'import("<PROJECT_PATH>/node_modules/@nrwl/angular/node_modules/rxjs/internal/Observable").Observable<any>'

If I understand that correctly then DataPersistence uses a different version of observable.
Is there any way of getting around this error?

I'll try to find some time tonight to extract a portion of my project for reproduction purposes.

[jasedwards]

The imports were migrated fine for me as well. It is now referencing @nrwl/angular.

Also, forgot to add this:

Angular CLI: 8.0.0
Node: 10.15.1
OS: win32 x64
Angular: 8.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.800.0
@angular-devkit/build-angular      0.800.0
@angular-devkit/build-ng-packagr   0.800.0
@angular-devkit/build-optimizer    0.800.0
@angular-devkit/build-webpack      0.800.0
@angular-devkit/core               0.8.9
@angular-devkit/schematics         0.8.9
@angular/cdk                       7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.0.0
@schematics/angular                8.0.0
@schematics/clearsight             0.0.1
@schematics/update                 0.800.0
ng-packagr                         5.2.0
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.30.0

[jasedwards]

ugh. that fixed it. thanks.

[FallenRiteMonk]

@jasedwards what fixed it?

[FillScheers]

Version conflict of rxjs

Nx useses version 6.4.0 but the default is 6.5.2

[jasedwards]

@FillScheers @FallenRiteMonk Correct. I fixed it by changing version to ~6.4.0

[FallenRiteMonk]

@FillScheers @jasedwards thanks that fixed my problem during the build, but now I get the following error during run time:

ERROR Error: Effect "ServicesEffects.loadServices$" dispatched an invalid action: {"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":true,"value":{"url":"<REQUEST_URL>","body":null,"reportProgress":false,"withCredentials":false,"responseType":"json","method":"GET","headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"params":{"updates":null,"cloneFrom":null,"encoder":{},"map":null},"urlWithParams":"<REQUEST_URL>"}},"operator":{"concurrent":1}},"operator":{}},"operator":{}},"operator":{"concurrent":null}}
    at reportInvalidActions (effects.js:219)
    at verifyOutput (effects.js:195)
    at MapSubscriber.project (effects.js:306)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at ExhaustMapSubscriber.notifyNext (exhaustMap.js:60)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)

[FallenRiteMonk]

Today after upgrading to nx 8.0.2 everything worked fine!

[jasedwards]

I don't see a version 8.02. I noticed that ngrx will require rxjs version 6.5. will this cause issues here since we have to set it to 6.4?

[jsonberry]

⚠️ Be advised: All use of DataPersistence seems to be broken still for me, I would have to rip it out throughout my application in order to move forward with nrwl/ng updates from 7 to 8
See comments below, I'm no longer able to reproduce the error.

---

@FallenRiteMonk What versions of these are you running? I am running:

• rxjs 6.4.0
• @ngrx/effects 7.2.0
• @ngrx/store 7.2.0
• @nrwl/angular8.0.2

I have also ran into the issue where it looks like the DataPersistence library is attempting to dispatch an Observable into the store, not an Action, which is where this error messages comes from:

ERROR Error: Effect "ServicesEffects.loadServices$" dispatched an invalid action: {"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":true,"value":{"url":"<REQUEST_URL>","body":null,"reportProgress":false,"withCredentials":false,"responseType":"json","method":"GET","headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"params":{"updates":null,"cloneFrom":null,"encoder":{},"map":null},"urlWithParams":"<REQUEST_URL>"}},"operator":{"concurrent":1}},"operator":{}},"operator":{}},"operator":{"concurrent":null}}
    at reportInvalidActions (effects.js:219)
    at verifyOutput (effects.js:195)
    at MapSubscriber.project (effects.js:306)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)
    at ExhaustMapSubscriber.notifyNext (exhaustMap.js:60)
    at InnerSubscriber._next (InnerSubscriber.js:11)
    at InnerSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)
    at MapSubscriber.next (Subscriber.js:49)

@jasedwards 8.0.2 was released today, it can be installed, doesn't look like they had the release cut and tagged but it was pushed for installation at the time I tried installing it.

[vsavkin]

Sorry about this issue. I tried to repro it using 8.0.2 but I could not.

@jsonberry Could you create a min repository reproducing the issue?

[jamesgroat]

@vsavkin I ran into this as well. I think it is a rxjs version mismatch issue. For me this check here: https://github.com/nrwl/nx/blob/master/packages/angular/src/runtime/nx/data-persistence.ts#L439 failed even though debugger showed to me that it was an Observable. Results in the observable being wrapped in another observable.

[jsonberry]

@vsavkin While working on a repo for reproduction I noticed that one project was running @nrwl/[email protected], another was running @nrwl/[email protected].

The project running 8.0.2 had the error. I installed 8.0.1-beta2 and the error went away. I then reinstalled 8.0.2 and the error is no longer reproducible.

These versions seem to be working together:

├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @ngrx/[email protected]
├── @nrwl/[email protected]
├── [email protected]
├── [email protected]

During my update from 7 to 8 I had ran this:

npm run update

☝️ That had not seemed to effect files, so I ran this:

ng update @nrwl/schematics --from 7 --to 8 --migrate-only

☝️ That updated files, at which point I had started to see this error but I'm no longer able to reproduce it.

[FallenRiteMonk]

@jsonberry im running the following versions without any problems now:

• rxjs 6.4.0
• @ngrx/effects 7.4.0
• @ngrx/store 7.4.0
• @nrwl/angular8.0.2

[neilhem]

With @ngrx/*@8 and [email protected] I get error:

ERROR in node_modules/@ngrx/effects/fesm2015/effects.js 696:25-41
"export 'NotificationKind' was not found in 'rxjs

[timdeschryver]

@neilhem NgRx v8 requires RxJS v6.5

https://ngrx.io/guide/migration/v8#dependencies

[jasedwards]

My thinking is then that anybody using nx and ngrx is unable to update to v8 until nx no longer requires version 6.4 or rxjs. Is this correct?

[timdeschryver]

Fyi, the NgRx team has made some changes that allows us to use RxJS v6.4
We'll probably cut a release soon, which should solve these issues 🙂
I'll drop a message where when we've released NgRx v8.0.1

[timdeschryver]

NgRx 8.0.1 has been released 🚀

[vsavkin]

It looks like NgRx 8.0.1 works with RxJS 6.4, so no changes to Nx required at this moment.

If anyone is able to create a small Nx 7 project that cannot be upgraded to Nx 8, could you share it? I'm not able to repro the issue.

[jasedwards]

@vsavkin I was able to get it to work completely once NgRx 8.0.1 came out. I just have rxjs hard coded to 6.4. Is there an issue I can follow in nx to know when 6.4 will no longer be necessary?

[vsavkin]

Hey folks. Since we upgraded Nx to use NgRx 8.1, I'm going to close this issue. If the issue persists in the latest version of Nx 8+, please reopen the issue and I'll take a look asap.

[GetCurious]

my boss wont let me upgrade to angular 8! how do i fix this _isScalar error
EDIT:
nvm... @Effect({dispatch: false}) did the trick

[EvtK]

I'm struggling with this issue as while. Below code used to work before I upgraded to Nx 8:

 @Effect()
  loadData$ = this.dataPersistence.fetch(
    LoadDataActionTypes.LoadData,
    {
      run: () => {
        return this.service.loadData().pipe(
          map((response: Response) => {
            return new LoadDataSuccessAction(response.data);
          }),
        );
      },
    },
  );

but now I get this error:

core.js:4002 ERROR Error: Effect "LoadDataEffects.loadData$" dispatched an invalid action: {"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":true,"value":{}},"operator":{"total":1}},"operator":{"nextOrObserver":{"hasValue":false}}},"operator":{}}

Any directions on how to resolve this? Looking at the code I'm actually returning a mapped Action

edit: spent a lot of hours on this subject, in the end it appears to be an issue with the following packages:

@angular-devkit/core, @angular-devkit/schematics, @nrwl/schematics, @schematics/angular,

I started a new clean workspace and noticed none of these packages is added by default (it is all @nrwl/angular now). So I removed them bit by bit from my repo and it solved the problems.

[timvandesteeg]

Had exactly the same problems as described in this topic. What worked for me:

• fix rxjs to 6.4.0
• update ngrx to the latest version (8.3.0 in my case)
• update nrwl/angular to the latest version (8.5.1 in my case)

In total:
"rxjs": "^6.4.0"
"@ngrx/effects": "^8.3.0",
"@ngrx/entity": "^8.3.0",
"@ngrx/router-store": "^8.3.0",
"@ngrx/store": "^8.3.0",
"@nrwl/angular": "^8.5.1",
"@nrwl/cypress": "8.4.8",
"@nrwl/jest": "8.4.8",
"@nrwl/workspace": "8.4.8",

[philly-vanilly]

@FrozenPandaz

I still get the errors in the latest version of NX (8.5). However, I am using only @nrwl/angular because I have yet to bootstrap my app into a workspace (which is not so easy with Ionic). But as far as I see here https://github.com/nrwl/nx/blob/master/packages/angular/src/runtime/nx/data-persistence.ts there are no dependencies from data-persistence to the workspace or any other NX modules...

In particular the error ... dispatched an invalid action: {"_isScalar":false,"source" indicates that the run method dispatched an observable, where a non-observable-Action was expected, no? What might be causing this? In the source code it looks like the return object is only wrapped into an observable if it is not an observable yet (see wrapIntoObservable) so this here should be an acceptable implementation of the run method, no?

return this.httpClient.get(...).pipe(map(res => resToAction(res)));

As @jasedwards suggested, I have forced my rxjs to be ^6.4, so if (!!obj && obj instanceof Observable) { should be valid, which makes this really weird...

[EvtK]

@philly-vanilly can you share your package.json? i fixed this by creating a clean workspace and then adding new packages one a time. This is how I discovered which packages created the typing errors or dispatched invalid action problem. I definitly has to do with the RxJs package version which is added as dependecy.

[mohyeid]

I can repro this with
"@ngrx/effects": "8.5.0",
"@ngrx/entity": "8.5.0",
"@ngrx/router-store": "8.5.0",
"@ngrx/store": "8.5.0",
"@nrwl/angular": "8.7.1",
"@nrwl/workspace": "8.7.1",
"@schematics/angular": "0.8.3",
"rxjs": "6.4.0",

[cwmrowe]

I am getting the dispatched an invalid action runtime error with latest versions or NGRX and NX and 6.4.0 of RXJS. Not sure what to try next...

+-- @angular-devkit/[email protected]
+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @nrwl/[email protected]
+-- @nrwl/[email protected]
+-- UNMET PEER DEPENDENCY [email protected]
+-- UNMET PEER DEPENDENCY [email protected]

[cwmrowe]

Ok, so I fixed it by uninstalling @nrwl/angular and then reinstalling @nrwl/[email protected] with npm. Which had the effect of removing @nrwl/angular's local version of rxjs, which was reflected in package-lock.json.