AOT and reducer factories in v4

[ValeryVS]

I'm experimenting with factories for ngrx.
Here is example app.
https://github.com/ValeryVS/angular-storage-experiment

with v2
https://github.com/ValeryVS/angular-storage-experiment/blob/16febfb4d141476dfefe97b5de4b8f90d318d68b/src/app/store/reducer.ts

with v4
https://github.com/ValeryVS/angular-storage-experiment/blob/46c20b987369b0017435f37fada4febdcf1e6937/src/app/store/reducer.ts

However, in v4 version I have AOT error.

ERROR in Error encountered resolving symbol values statically. Expression form not supported (position 16:7 in the original .ts file), resolving symbol createReducer in /Users/valery/Projects/storage-experiment/src/app/store/organization/reducers/index.ts, resolving symbol compileReducers in /Users/valery/Projects/storage-experiment/src/app/store/reducer.ts, resolving symbol AppModule in /Users/valery/Projects/storage-experiment/src/app/app.module.ts, resolving symbol AppModule in /Users/valery/Projects/storage-experiment/src/app/app.module.ts, resolving symbol AppModule in /Users/valery/Projects/storage-experiment/src/app/app.module.ts

Can you give an advice, what to change?

[karptonite]

I can confirm that I am having similar issues. Here is relevant code in my project:
https://gist.github.com/karptonite/807150583a086ed8736f129d8094e88c
my error is different, though:
ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 5:9 in the original .ts file), resolving symbol createNamedWrapperReducer in /Users/karp/Documents/git/bgg/geekui2/src/app/store/meta/meta-reducers.functions.ts, resolving symbol createSubscriptionStatusesReducer in /Users/karp/Documents/git/bgg/geekui2/src/app/store/subscriptions/subscription-statuses.reducer.ts, resolving symbol reducers in /Users/karp/Documents/git/bgg/geekui2/src/app/store/reducers.ts, resolving symbol AppModule in /Users/karp/Documents/git/bgg/geekui2/src/app/app.module.ts, resolving symbol AppModule in /Users/karp/Documents/git/bgg/geekui2/src/app/app.module.ts, resolving symbol AppModule in /Users/karp/Documents/git/bgg/geekui2/src/app/app.module.ts

I haven't dug too much into it yet.
I'll add that, bizarrely, if I do my compilation automatically with ng serve, I get this error the first time it compiles, but any time it recompiles, it compiles successfully.

[shlomiassaf]

That's a limitation from the angular AOT compiler.

It is partially explained here

However, that explanation refers to the metaReducers part.

The problem you'r having is with the reducers argument.

This workaround should probably work:

export const reducers: ActionReducerMap<RootState> = {};
reducers.organization = fromOrganization.createReducer(ORGANIZATION);
reducers.user = fromUser.createReducer(USER);

The team will probably need to support a reducer factory function for reducers but that might confuse dev's that will send a reducer function to it.

I did see that there is a reducerFactory property in the options which might just do that but its not documented and I didn't follow the code.

[karptonite]

@shlomiassaf That sort of worked--thanks. I had to remove the equivalent of organizations and users from the interface of RootState, however, or typescript would not accept the initial assignment.

It is a weird bug all round, especially the fact that compilation didn't always seem to fail.

[brandonroberts]

You can use an Injection token instead. See ngrx/store#444 (comment)

[karptonite]

@brandonroberts ah, that looks cleaner! I'll give it a try.

[alexjlockwood]

Has anyone tested whether the example app in this repo works with AOT?

[shlomiassaf]

I did not check but I can't get this to work....

The ReducerManager get's the InjectonToken injected instead of the reducers, in AOT.
In JIT it works fine,.

[alexjlockwood]

I have not tested either (trying to figure out how to build it right now) but I noticed this line of code in the app module:

@NgModule({
  imports: [
    // ...

    !environment.production ? StoreDevtoolsModule.instrument() : [],
 
    // ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

I forget exactly what the reasoning was, but I remember debugging my code for hours trying to figure out why my app was building fine w/o AOT but was failing with the AOT flag enabled. I finally realized that my code was failing to build because I was dynamically enabling/disabling certain imports in my NgModule decorator depending on the value of the environment.production flag. So this code looks very suspicious to me.

[shlomiassaf]

Ok, ran this repo AOT.

I can confirm that the using an InjectionToken in the reducers does not work

To run the example app AOT you need to:

• Clone the repo
• instal node modules.
• add and install the packages

yarn add @ngrx/store @ngrx/effects @ngrx/router-store @ngrx/store-devtools

Yes... we need to do that so we wont need to get crazy with AOT path mapping for the modules.

• Remove the path mappings from tsconfig
• run `ng build -prod -aot

cc @brandonroberts

[alexjlockwood]

Also, not sure if this has already been mentioned, but there are some docs on AOT compilation with v4 here: https://github.com/ngrx/platform/blob/master/docs/store/api.md#initial-state-and-ahead-of-time-aot-compilation

[shlomiassaf]

This looks like heavy DI stuff.

At the point where the providers needs to resolve the user provided token for the reducers is not present, kind of...

It is present (with its value) in the module definition and the providers for the module definition.
But it is not present on the injector.

It will be but not at this point, I tried injection it into the constructor of the AppRootModule and it worked...

The picture above is that moment when StoreModule needs to resolve it.
To get there I replaced the providers definition in StoreModule for the INITIAL_REDUCERS

        { provide: _INITIAL_REDUCERS, useValue: reducers },
        {
          provide: INITIAL_REDUCERS,
          useFactory: _initialReducersFactory,
          deps: [_INITIAL_REDUCERS, Injector],
        },

export function _initialReducersFactory(reducers: any, injector: Injector): any {
  return reducers instanceof InjectionToken
    ? injector.get(reducers)
    : reducers
  ;
}

Put a breaking point at the function when it starts, and thats the state for that image

[shlomiassaf]

Ok, with more digging into the problem i'm not sure it's a bug in ngrx

I managed to get this working using the fix I set in the last comment + a workaround.

This splits into multiple issues that together cause this.

Why the fix (_initialReducersFactory):

The AOT compiler does not handle metadata logic statement properly

The INITIAL_REDUCERS provider is defined like this:

reducers instanceof InjectionToken
          ? { provide: INITIAL_REDUCERS, useExisting: reducers }
          : { provide: INITIAL_REDUCERS, useValue: reducers },

The AOT compiler is aware of that since this gets reflected in the ngsummary.json files.
But it does not evaluate it in compilation (or its does, but not correct)

When we examine the AOT compiled code:

__WEBPACK_IMPORTED_MODULE_0__angular_core__["d"/* ɵmpd */](
  256, 
  __WEBPACK_IMPORTED_MODULE_5__ngrx_store__["l"/* INITIAL_REDUCERS */],
  __WEBPACK_IMPORTED_MODULE_1__app_app_module__["b"/* REDUCERS_TOKEN */],
  []
);

The above is the AOT representation of the logical statement above it.

Since reducers is static at compilation AOT can run that logical expression and act upon it...

The flag 256 is the result of the expression.

    TypeValueProvider = 256,
    TypeClassProvider = 512,
    TypeFactoryProvider = 1024,
    TypeUseExistingProvider = 2048,

It means that AOT yielded useValue and not useExisting...

I think we need firepower here, @mhevery @tbosch @robwormald

Workaround

The workaround (after applying the fix) is just making sure that the provider is available before StoreModule.

Setting the provider at the providers array of the AppModule is not good since it will not be available once the token is needed.

So just make sure it's evaluated before:

export const REDUCERS_TOKEN = new InjectionToken<ActionReducerMap<any>>('Registered Reducers');

@NgModule({
  providers: [
    { provide: REDUCERS_TOKEN, useValue: reducers }
  ]
})
export class TempModule {
  constructor(@Inject(REDUCERS_TOKEN) r: any) {
    console.log(r);
  }
}

And then set this module in the AppRoot imports.

Its important to inject it in the constructor else it won't eval (its lazy)