Function calls are not supported in decorators but 'inOutTransitions' was called in 'fxArray'

[ntrpnr]

I get this error message when trying to build with angular cli. If I just use ng serve it works.

I'm using the latest version of ack-angular-fx and angular.

> ng build --prod

Date: 2018-02-28T22:56:02.186Z
Hash: 994489f07662490f88eb
Time: 12421ms
chunk {0} styles.d6ad1a9bb356a859bd33.bundle.css (styles) 118 kB [initial] [rendered]
chunk {1} polyfills.3bc34265385d52184eab.bundle.js (polyfills) 86 bytes [initial] [rendered]
chunk {2} main.e402deade8b026b7d50e.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.22b7623ed7c5ac6f9a35.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in app\log-upload\log-upload.component.ts(34,15): Error during template compile of 'LogUploadComponent'
  Function calls are not supported in decorators but 'inOutTransitions' was called in 'fxArray'
    'fxArray' references 'fxArray'
      'fxArray' references 'triggers' at ..\ack-angular-fx\dist\allFx.ts(14,6)
        'triggers' calls 'inOutTransitions' at ..\ack-angular-fx\dist\animations\fade.ts(86,3).

[AckerApple]

I got nothing at first glance at your issue report. You say latest Angular so I’ll take your word at that

[AckerApple]

I build using ngc and not ng

[AckerApple]

Checking source code for a function call related to inOutTransitions.... brb

[AckerApple]

My assumption is you are not on the latest Angular and/or the latest cli builder.

In previous versions of Angular you couldn't build animations this way.

In previous versions of Angular, we had to compile a flat animations file use ack-angular-fx cli commands.

Please ensure everything is fully up to date. If issue persists, I can instruct you on how to run ack-angular-fx cli commands to generate a single file with all animations you want written as one file with no function calls

[AckerApple]

The docs needed a lot of updating, I have done so.

I have added documentation to pre compile all animations to a single file that has no function calls. You should only need this for old outdated Angular though: compile animations to prefx file

I build animation to production with no issues though so sorry for the troubles you are having

[ntrpnr]

Thanks for the quick and extensive feedback.

I am indeed using the latest angular version and angular-cli.

I tried to precompile the animations and using the prefx.js but I still get a similar error:

> ng build --prod

Date: 2018-03-01T10:20:01.444Z
Hash: 577f97c3d7584b6f3154
Time: 7656ms
chunk {0} styles.9260234fb5f835826bb8.bundle.css (styles) 116 kB [initial] [rendered]
chunk {1} polyfills.997d8cc03812de50ae67.bundle.js (polyfills) 84 bytes [initial] [rendered]
chunk {2} main.ee32620ecd1edff94184.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

ERROR in app\log-upload\log-upload.component.ts(33,15): Error during template compile of 'LogUploadComponent'
  Function expressions are not supported in decorators in 'fxArray'
    'fxArray' contains the error at prefx.ts(4161,14)
      Consider changing the function expression into an exported function.

I will try to manually edit the prefx.ts file and export the functions in order to build, but it would of course be better if the build worked out of the box.

Thanks

[ntrpnr]

Here's the prefx I've precompiled.

[AckerApple]

I wonder if every function must be exported? I’ve seen where Angular needs all functions exported for compiling. Hmmmmmmmm, I don’t have this issue at all. Again my compile commands are ngc and not just ng.

I’ll try a little bit more for ya but not a whole lot. Functions in transitions are totally legal, so I think it’s just a matter of adding an export declaration in front of every transition function.

I’ll try more today for ya. Again not a whole lot though as I have no issues bundling

[ntrpnr]

Does your prefx.ts file look the same?

If not, please share it.

[ntrpnr]

I have confirmed that ngc produces the same error as ng build --prod

[AckerApple]

Try ack-angular-fx 2.0.8 that I just pushed for you

The transition functions are now exported.

Do NOT use the prefx for this! Those transition function will still NOT be exported. Aka go back to the way you started.

Let me know

[AckerApple]

Hold on, reviewing further.... I think my last push didn't go through right anyhow...brb

[AckerApple]

2.0.9 . Get that version of ack-angular-fx and try again the original way. All functions are exported.

Let me know

[AckerApple]

If it still doesnt work for you, can you show me your package.json

[ntrpnr]

I've created a custom prefx which works.

I'm exporting the functions used as argument in the transition method.

export function falseTo(from, to) { return !to ? true : false; }
export function trueTo(from, to) { return to ? true : false; }
export function falseNofxFalseVoid(from, to) { return from !== 'nofx' && from !== 'void' && to === 'void' ? true : false; }
export function falseNofxTrueVoid(from, to) { return to && to !== 'nofx' && from === 'void' && to !== 'void' ? true : false; }

This works for now but a solid fix would be appreciated.

[AckerApple]

AWESOME! Please try 2.0.9 as based on your findings I am certain the new release will have you all set

(without the prefx)

[ntrpnr]

Unfortunately, 2.0.9 does not work.

package.json

{
  "name": "log-analyzer.web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prefx": "ack-angular-fx --out ./src/prefx.ts"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.7",
    "@angular/common": "^5.2.7",
    "@angular/compiler": "^5.2.7",
    "@angular/core": "^5.2.7",
    "@angular/forms": "^5.2.7",
    "@angular/http": "^5.2.7",
    "@angular/platform-browser": "^5.2.7",
    "@angular/platform-browser-dynamic": "^5.2.7",
    "@angular/router": "^5.2.7",
    "ajv": "^6.2.0",
    "auth0-js": "^9.3.1",
    "auth0-lock": "^11.0.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ng2-file-upload": "^1.3.0",
    "ngx-restangular": "^2.0.2",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.2",
    "@angular/compiler-cli": "^5.2.7",
    "@angular/language-service": "^5.2.7",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "ack-angular-fx": "^2.0.9",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3",
    "webpack": "^3.11.0"
  }
}

Confirming version

> npm list ack-angular-fx
log-analyzer.web@0.0.0 C:\LogAnalyzer\LogAnalyzer\LogAnalyzer.Web
`-- ack-angular-fx@2.0.9

Building

> ngc
src\app\log-upload\log-upload.component.ts(34,15): Error during template compile of 'LogUploadComponent'
  Function calls are not supported in decorators but 'inOutTransitions' was called in 'fxArray'
    'fxArray' references 'fxArray'
      'fxArray' references 'triggers' at ack-angular-fx\dist\allFx.ts(14,6)
        'triggers' calls 'inOutTransitions' at ack-angular-fx\dist\animations\fade.ts(86,3).

[AckerApple]

I'm on Angular 5.2.6 and I will try 5.2.7 but I'm sure it works.

I've forever had to use the prefx file BEFORE Angular 5.2.0+

One thing ill do today is have the prefx auto export functions since that did work for u. I know the prefx file is NOT what you want but I'm not having these issues like you. I dont think you are doing anything wrong, this whole Angular JiT and AoT compiling has been the roughest PoS process in a long time.

Talk later

[AckerApple]

I got an idea... Essentially, I'm going to have this package create the prefx file inside this package. So instead of you creating a prefx file, you will just import the prefx file from this package

Something like:

import { fxArray } from "ack-angular-fx/dist/prefx"

I'll get back to you shortly

[AckerApple]

Ok, please try ack-angular-fx 2.0.10

Use the original import:

import { fxArray } from "ack-angular-fx"

Essentially the allFx.ts file inside ack-angular-fx is no longer dynamically created and is now compiled FROM the prefx process that is known to work. This will make using ack-angular-fx faster once I get rid of the deprecated [@200] animations from Angular4

Also the prefx file process has been upgraded to move all functions to exports.

Check it out. Let me know how it goes. 2.0.10

[ntrpnr]

2.0.10 still produces a similar, but not the same error.

> ngc
src\app\log-upload\log-upload.component.ts(34,15): Error during template compile of 'LogUploadComponent'
  Function expressions are not supported in decorators in 'fxArray'
    'fxArray' references 'fxArray'
      'fxArray' references 'childOut'
        'childOut' contains the error at ack-angular-fx\dist\allFx.ts(3,25)
          Consider changing the function expression into an exported function.

[AckerApple]

I see I see, I am using export const name = function name()

Two minutes...

[AckerApple]

Please try 2.0.11

Changed export const name = function name(){} to export function name(){}

[ntrpnr]

It works.

Thank you so much for your fast reply and hard work.

[AckerApple]

Phat Thursday!

I busted tail for us. I have two requests for you:

1. Please star, follow, and perform any other social actions that might help naturally boost the popularity of this package.
2. Special friendly request, please update your Github icon as soon as possible to a real picture of yourself. I would like to remember those I work with beyond a follow button.

Have a great one! Thanks for your patience and help. Hope you your sponsors like the end result.

Please close this issue if satisfied

[ntrpnr]

Consider it done. Thanks again.

[AckerApple]

Please acquire ack-angular-fx 2.1.0

I have removed all deprecated Angular4 animations to drastically improve the loading times of these animations.

I doubt you used but no longer can you use [@100],[@200],[@absoluteSwap],[@absoluteSwap100], and so on...

[AckerApple]

I much appreciated your help today and I tell you why........... I have come to find out that I thought I had engaged AoT production compiling for Angular5 but it turns out I completely was not.

This is why I was not experiencing the same issue as you..... So now my load time are 22x more efficient.

Our work today proves the benefits of Open Source coding. This whole time, one week since upgrading to Angular5, I was wrong thinking I was compiling correctly... man was I wrong.

Alright, great show today. Great show indeed. A new release will be coming shortly but nothing that matters to you. Just bundles example page correctly

[ntrpnr]

That's great. Indeed I could also experience the power of open source and collab today.

Off-topic: Just experienced a very strange coincidence... I was searching for ways to extend the FileItem class of ng2-file-uploader... And ended up in this thread: https://github.com/valor-software/ng2-file-upload/issues/900

Did you ever find a solution? I have a very similar challenge where I need to use the queue for some more stuff than just uploading files.

[AckerApple]

YOOOOO DONT USE THAT PACKAGE!!!

Typing....

[AckerApple]

I forked that crappy package a long ass time ago. You need to use mine:

https://www.npmjs.com/package/angular-file

[AckerApple]

Send files using Angular's Http... Don't use the poor old ass Http transmitter built into that sucky old ng2-file-upload package

[ntrpnr]

What would say would be the easiest way to add custom properties (and methods) to FileItem objects in the queue, when using your fork? Without forking your fork... Is it possible?

[AckerApple]

With my package, as each item is selected you could do something like:

<input type="file" ngfSelect (filesChange)="loopFilesAndSetWhatever($event)"

[ntrpnr]

Aight, me and my colleague will have a look at it tomorrow. You'll hear from us later. 👍