angularngrxangular-ngrx-datangrx-data

How to configure NGRX/Data for AOT compilation


I have a standard setup from the NGRX data docs with one Entity. Everything works with JIT but when I do AOT then I get following Error:

...
Function expressions are not supported in decorators in 'entityConfig'
'entityConfig' references 'ɵ0'
...
Consider changing the function expression into an exported function.

My entity config:

const entityMetadata: EntityMetadataMap = {
  Identifiers: {}
};

export const entityConfig = {
  entityMetadata
};

My module:

...
import { entityConfig } from './store/entity-metadata';

@NgModule({
  imports: [CommonModule, EntityDataModule.forRoot(entityConfig)]
})
...

The error is thrown here: EntityDataModule.forRoot(entityConfig)

Versions:

"@angular/core": "^8.1.1",
"@ngrx/data": "^8.6.0",
"@ngrx/store": "^8.6.0",

Solution

  • The problem can be solved by using the EntityDefinitionService like this:

    import { EntityDefinitionService } from '@ngrx/data';
    import { entityMetadata } from './store/entity-metadata';
    
    @NgModule({
      imports: [CommonModule]
    })
    export class NotLazyLoadedFeatureModule {
      constructor(private eds: EntityDefinitionService) {
        eds.registerMetadataMap(entityMetadata);
      }
    }
    

    But the EntityDefinitionService expects the EntityMetadataMap directly, without wrapping it in an Object.

    export const entityMetadata: EntityMetadataMap = {  -> Use this
      Identifiers: {}
    };
    
    /* export const entityConfig = {  -> Not needed anymore
      entityMetadata
    };*/
    

    Worth mentioning is that I have the Store split up to multiple modules. They are technically not lazy-loaded but my app-store.module.ts looks like this:

    @NgModule({
      declarations: [],
      imports: [
        CommonModule,
        StoreModule.forRoot({}),
        EffectsModule.forRoot([]),
        EntityDataModule.forRoot({}), <- Only needed once
        NotLazyLoadedFeatureModule, <- Import not lazy loaded modules here
        StoreDevtoolsModule.instrument()
      ]
    })
    export class AppStoreModule {}
    

    Comprehensive explanation about the difference between JIT and AOT:
    https://gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60