Platform: createEntityAdapter fails to compile with Ionic 3 / Angular 5 AoT

Created on 12 Mar 2018  路  7Comments  路  Source: ngrx/platform

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

I am unable to build application using ionic build --prod. It appears to be failing inside the Angulat AoT compiler. The error received is

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 8:13 in the original .ts file),
resolving symbol commentAdapter in
/home/wgrimes/git/custom-app/src/app/core/comment-store/comment.state.ts, resolving symbol
commentInitialState in /home/wgrimes/git/custom-app/src/app/core/comment-store/comment.state.ts,
resolving symbol commentInitialState in
/home/wgrimes/git/custom-app/src/app/core/comment-store/comment.state.ts, resolving symbol
CommentStoreModule in /home/wgrimes/git/custom-app/src/app/core/comment-store/comment-store.module.ts,
resolving symbol CommentStoreModule in
/home/wgrimes/git/custom-app/src/app/core/comment-store/comment-store.module.ts, resolving symbol
CommentStoreModule in /home/wgrimes/git/custom-app/src/app/core/comment-store/comment-store.module.ts

Error: The Angular AoT build failed. See the issues above
    at /home/wgrimes/git/custom-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
    at step (/home/wgrimes/git/custom-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
    at Object.next (/home/wgrimes/git/custom-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
    at fulfilled (/home/wgrimes/git/custom-app/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)
    at <anonymous>

Expected behavior:

I would expect the compiler to build the application without errors.

Minimal reproduction of the problem with instructions:

Create an Angular 5 application using @ngrx/entity, create an entity adapter and attempt to compile with AoT.

Version of affected browser(s),operating system(s), npm, node and ngrx:

Node: 9.3.0
NPM: 5.6.0
NGRX: 5.1.0

from package.json:

"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic/pro": "^1.0.20",
"@ionic/storage": "2.1.3",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^5.1.0",
"@ngrx/entity": "^5.1.0",
"@ngrx/store": "^5.1.0",
"@ngrx/store-devtools": "^5.1.0",
"ionic-angular": "3.9.2",

Other information:

Current code that is failing:

import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';

import { PostCommentWithCommenter } from '../models';

export const commentAdapter: EntityAdapter<
  PostCommentWithCommenter
> = createEntityAdapter<PostCommentWithCommenter>({
  selectId: model => model.details.objectId,
  sortComparer: (
    a: PostCommentWithCommenter,
    b: PostCommentWithCommenter
  ): number =>
    b.details.createdAt.toString().localeCompare(a.details.createdAt.toString())
});

export interface CommentState extends EntityState<PostCommentWithCommenter> {
  isLoading?: boolean;
  error?: any;
}

export const commentInitialState: CommentState = commentAdapter.getInitialState();

I have tried refactoring to use only exported functions instead of all lambdas, but still receiving same errors.

Most helpful comment

@wesleygrimes just remove the initialState in CommentStoreModule. You don't need that because you already have state = commentInitialState, in commentReducer. Angular does not support function call in decorators except the arrow function call in NgModule providers useFactory

All 7 comments

Please provide a reproduction. If all functions are exported and your reducer isn't being generated by a factory it should work fine with AoT.

@brandonroberts Here's an example repo I put together that reproduces the issue.

Steps to reproduce

  1. clone the repo
  2. run npm install
  3. run the command ng build --aot

Just to clarify, the error now displayed is as follows:

ERROR in app/core/comment-store/comment-store.module.ts(12,21): Error during template compile of 'CommentStoreModule'
  Function calls are not supported in decorators but 'createEntityAdapter' was called in 'commentInitialState'
    'commentInitialState' references 'commentAdapter'
      'commentAdapter' calls 'createEntityAdapter' at app/core/comment-store/comment.state.ts(7,5).

@wesleygrimes just remove the initialState in CommentStoreModule. You don't need that because you already have state = commentInitialState, in commentReducer. Angular does not support function call in decorators except the arrow function call in NgModule providers useFactory

Oh... duh! Thanks for your help!

Thanks @sandangel !

My issue is resolved now by removing initialState from the ngmodule.

Was this page helpful?
0 / 5 - 0 ratings