Angular 18 Typescript useDefineForClassFields breaks NGRX Effects

[baarney]

Summary: Setting useDefineForClassFields: true in tsconfig.json appears to break the common NRGX Effects constructor pattern.

I'm upgrading a project from A17 to A18 and encountered a problem with NGRX effects. I did not upgrade the project in place - I created a brand new A18 project and copied the code in.

To demonstrate with simplest possible root effect:

import { Injectable } from "@angular/core";
import { Actions, createEffect } from "@ngrx/effects";
import { tap } from "rxjs";

@Injectable()
export class RootEffects {

  constructor(
    private actions$: Actions,
  ) {
    console.log("RootEffects::created");
  }

  testEffect = createEffect(() => {
    console.log("RootEffects::testEffect", this.actions$);
    return this.actions$.pipe(
      tap(action => console.log("RootEffects::action", action)),
    );
  }, { dispatch: false });
}

This worked fine in my A17 project but failed in my A18 project with:

TypeError: Cannot read properties of undefined (reading 'pipe')
    at root.effects.ts:16:26

Typescript versions were different (5.4.5 in A17 and 5.5.4 in A18) but the difference appears to be the change in useDefineForClassFields in tsconfig.json: this was explicitly set to false in my A17 tsconfig but not present in my A18 tsconfig, and as it is using ES2022 defaulted to true.

Examining the compiled JS appears to show the problem:

useDefineForClassFields: false

import { __decorate } from "tslib";
import { Injectable } from "@angular/core";
import { createEffect } from "@ngrx/effects";
let RootEffects = class RootEffects {
    constructor(actions$) {
        this.actions$ = actions$;
        this.testEffect = createEffect(() => {
            console.log("RootEffects::testEffect", this.actions$);
            return this.actions$.pipe(tap(action => console.log("RootEffects::action", action)));
        }, { dispatch: false });
        console.log("RootEffects::created");
    }
};
RootEffects = __decorate([
    Injectable()
], RootEffects);
export { RootEffects };
//# sourceMappingURL=root.effects.js.map

useDefineForClassFields: true

import { __decorate } from "tslib";
import { Injectable } from "@angular/core";
import { createEffect } from "@ngrx/effects";
import { tap } from "rxjs";
let RootEffects = class RootEffects {
    actions$;
    constructor(actions$) {
        this.actions$ = actions$;
        console.log("RootEffects::created");
    }
    testEffect = createEffect(() => {
        console.log("RootEffects::testEffect", this.actions$);
        return this.actions$.pipe(tap(action => console.log("RootEffects::action", action)));
    }, { dispatch: false });
};
RootEffects = __decorate([
    Injectable()
], RootEffects);
export { RootEffects };
//# sourceMappingURL=root.effects.js.map

When useDefineForClassFields is true the property initialisation does not appear to get moved up in to the constructor, so this.actions$ has not been set when testEffect is assigned.

A couple of easy workarounds:

• reset useDefineForClassFields: false in tsconfig.json
• move the actions from the constructor to an injected property

@Injectable()
export class RootEffects {

  actions$ = inject(Actions);

  testEffect = createEffect(() => {
    ...
  }, { dispatch: false });
}

Not sure if this is intended behaviour in TS or not, but posting this here in case it helps anyone else trying to work out what was going on.

May be related to microsoft/TypeScript#48814

[timdeschryver]

See #3654

[baarney]

Thanks Tim. I thought I'd done a pretty thorough search for 'useDefineForClassFields' - not sure why I didn't find that.