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

ntrpnr · 2018-02-28T23:02:10Z

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).

The text was updated successfully, but these errors were encountered:

AckerApple · 2018-02-28T23:07:32Z

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

AckerApple · 2018-02-28T23:11:19Z

I build using ngc and not ng

AckerApple · 2018-02-28T23:12:36Z

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

AckerApple · 2018-02-28T23:18:47Z

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 · 2018-02-28T23:55:20Z

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 · 2018-03-01T11:16:20Z

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 · 2018-03-01T11:19:09Z

Here's the prefx I've precompiled.

AckerApple · 2018-03-01T11:54:52Z

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 · 2018-03-01T11:57:54Z

Does your prefx.ts file look the same?

If not, please share it.

ntrpnr · 2018-03-01T12:07:20Z

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

AckerApple · 2018-03-01T12:16:24Z

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 · 2018-03-01T12:25:07Z

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

AckerApple · 2018-03-01T12:33:08Z

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

Let me know

AckerApple · 2018-03-01T12:34:47Z

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

ntrpnr · 2018-03-01T12:40:50Z

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 · 2018-03-01T12:41:45Z

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 · 2018-03-01T13:03:35Z

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 · 2018-03-01T13:19:12Z

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 · 2018-03-01T13:26:45Z

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 · 2018-03-01T13:59:32Z

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 · 2018-03-01T14:11:35Z

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 · 2018-03-01T14:45:29Z

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

Two minutes...

AckerApple · 2018-03-01T14:49:51Z

Please try 2.0.11

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

ntrpnr · 2018-03-01T15:04:03Z

It works.

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

AckerApple · 2018-03-01T15:09:15Z

Phat Thursday!

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

Please star, follow, and perform any other social actions that might help naturally boost the popularity of this package.
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 · 2018-03-01T15:16:32Z

Consider it done. Thanks again.

AckerApple · 2018-03-01T16:51:13Z

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 · 2018-03-01T21:08:37Z

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 · 2018-03-01T21:20:59Z

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: valor-software/ng2-file-upload#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 · 2018-03-01T21:21:57Z

YOOOOO DONT USE THAT PACKAGE!!!

Typing....

AckerApple · 2018-03-01T21:23:00Z

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

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

AckerApple · 2018-03-01T21:23:50Z

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 · 2018-03-01T21:26:32Z

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 · 2018-03-01T21:28:02Z

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

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

ntrpnr · 2018-03-01T21:33:39Z

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

ntrpnr closed this as completed Mar 1, 2018

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

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

Comments

ntrpnr commented Feb 28, 2018 • edited Loading

AckerApple commented Feb 28, 2018

AckerApple commented Feb 28, 2018

AckerApple commented Feb 28, 2018

AckerApple commented Feb 28, 2018

AckerApple commented Feb 28, 2018

ntrpnr commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018 • edited Loading

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018 • edited Loading

ntrpnr commented Mar 1, 2018 • edited Loading

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018 • edited Loading

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

AckerApple commented Mar 1, 2018

ntrpnr commented Mar 1, 2018

AckerApple commented Mar 1, 2018 • edited Loading

ntrpnr commented Mar 1, 2018

ntrpnr commented Feb 28, 2018 •

edited

Loading

ntrpnr commented Mar 1, 2018 •

edited

Loading

AckerApple commented Mar 1, 2018 •

edited

Loading

ntrpnr commented Mar 1, 2018 •

edited

Loading

ntrpnr commented Mar 1, 2018 •

edited

Loading

AckerApple commented Mar 1, 2018 •

edited

Loading