AOT compilation of animation callbacks #11707

Closed
cichacz opened this Issue Sep 19, 2016 · 6 comments

Comments

Projects
None yet
7 participants
@cichacz

cichacz commented Sep 19, 2016

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I'm experiencing this issue since RC.6 I thought that final release may be better, but it's still there, so either I'm doing something wrong, or there's a bug nobody found. SO gave me no answers.

I have Component defined like this:

@Component({
    moduleId: module.id,
    templateUrl: 'my.template.html',
    animations: [
      trigger('fadeInOut', [
        state('in', style({opacity: 1})),
        transition('void => *', [
            style({
                opacity: 0
            }),
            animate(500)
        ]),
        transition('* => void', [
            animate(500, style({
                opacity: 0
            }))
        ]),
    ])
  ]
})
export class MyComponent implements OnInit, OnDestroy {
    public stage: number = 0;
    ...
    transitionDone(transitionEvent: any): void {...}
    ...
}

And template looking like this:

<div
    *ngIf="stage"
    @fadeInOut
    (@fadeInOut.done)="transitionDone($event)"
></div>

App works fine when using JIT compilation, and done callback is fired correctly, but when i try to compile it using ngc (v. 0.6.2) directly to ES5 (or compile ngFactories and then compile it with tsc) it results with an error:

Supplied parameters do not match any signature of call target.

It's because ngc generates ngFactory file with wrong number of parameters for AnimationOutput:

this.registerAnimationOutput(
    this._el_0,
    new import24.AnimationOutput('fadeInOut','done'), <-- should be 3 args
    this.eventHandler(this._handle__fadeInOut_done_0_1.bind(this))
);

Expected behavior

Add 3rd arg to the ngc output or make 3rd arg of AnimationOutput optional.

Reproduction of the problem

Create component and view as described above, and try to compile it.

What is the motivation / use case for changing the behavior?

Can't compile it fully

Please tell us about your environment:

windows 10, ngc 0.6.2, typescript 2.0.2, angular-compiler 2.0.0

  • Angular version: 2.0.0

  • Browser: [all]

  • Language: [TypeScript 2.0.2]

  • Node (for AoT issues): node --version = 6.4.0

@dricogit

This comment has been minimized.

Show comment
Hide comment
@dricogit

dricogit Sep 19, 2016

Same problem here

<div #elm [@animState]="varState" (@animState.done)="animEnd($event)"></div>

dricogit commented Sep 19, 2016

Same problem here

<div #elm [@animState]="varState" (@animState.done)="animEnd($event)"></div>

matsko added a commit to matsko/angular that referenced this issue Sep 21, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 21, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 21, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 21, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 21, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

matsko added a commit to matsko/angular that referenced this issue Sep 22, 2016

rkirov added a commit that referenced this issue Sep 23, 2016

chuckjaz added a commit to chuckjaz/angular that referenced this issue Oct 5, 2016

chuckjaz added a commit that referenced this issue Oct 5, 2016

@jetlogs

This comment has been minimized.

Show comment
Hide comment
@jetlogs

jetlogs Oct 6, 2016

encountered the same issue here:

            (@questionAnimation.done)="animationDone($event)"
            [@questionAnimation]="animationState"
            [style.transform]="'translateX(-100%)'"
            class="quiz-question full-width col-xs-12">

AOT output is:

this.registerAnimationOutput(this._el_2,new import25.AnimationOutput('questionAnimation','done'),this.eventHandler(this._handle__questionAnimation_done_2_0.bind(this)));

AOE error is:

Error: Error at D:/workspace/site/site-main-typescript/src/app/quiz-app/quiz-question.component.ngfactory.ts:317:45: Supplied parameters do not match any signature of call target.
    at check (D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\tsc.js:31:15)
    at Tsc.typeCheck (D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\tsc.js:86:9)
    at D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\main.js:33:23
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
Compilation failed

my package json dependencies are:

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "^0.6.4",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "^2.0.2",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "@types/videojs": "0.0.30",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.6.3",
    "jquery": "^3.1.0",
    "localforage": "^1.4.2",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "video.js": "^5.11.7",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "codelyzer": "0.0.28",
    "concurrently": "^2.2.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "lite-server": "^2.2.2",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "tslint": "^3.15.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.3",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.15.0",
    "webpack-merge": "^0.14.1"
  }

jetlogs commented Oct 6, 2016

encountered the same issue here:

            (@questionAnimation.done)="animationDone($event)"
            [@questionAnimation]="animationState"
            [style.transform]="'translateX(-100%)'"
            class="quiz-question full-width col-xs-12">

AOT output is:

this.registerAnimationOutput(this._el_2,new import25.AnimationOutput('questionAnimation','done'),this.eventHandler(this._handle__questionAnimation_done_2_0.bind(this)));

AOE error is:

Error: Error at D:/workspace/site/site-main-typescript/src/app/quiz-app/quiz-question.component.ngfactory.ts:317:45: Supplied parameters do not match any signature of call target.
    at check (D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\tsc.js:31:15)
    at Tsc.typeCheck (D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\tsc.js:86:9)
    at D:\workspace\site\site-main-typescript\node_modules\@angular\tsc-wrapped\src\main.js:33:23
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
Compilation failed

my package json dependencies are:

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "^0.6.4",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "^2.0.2",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "@types/videojs": "0.0.30",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.6.3",
    "jquery": "^3.1.0",
    "localforage": "^1.4.2",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "video.js": "^5.11.7",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "codelyzer": "0.0.28",
    "concurrently": "^2.2.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "lite-server": "^2.2.2",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "tslint": "^3.15.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.3",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.15.0",
    "webpack-merge": "^0.14.1"
  }
@jetlogs

This comment has been minimized.

Show comment
Hide comment
@jetlogs

jetlogs Oct 6, 2016

I figured it out, the main issue is with the tsconfig.json

this version of tsconfig.json fails

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false,
    "mapRoot": "/",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../../site-main-php/src/main/webapp/public/js/compiled",
    "rootDir": "./",
    "inlineSources": true
  }
}

this version of tsconfig-aot.json works:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false,
    "mapRoot": "/",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../../site-main-php/src/main/webapp/public/js/compiled",
    "rootDir": "./",
    "inlineSources": true
  },
  "files": [
    "app/polyfill.ts",
    "app/vendor.ts",
    "app/common-app.ts",
    "app/shared-player.ts",
    "app/quiz-app.ts",
    "./typings.d.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

now the question is what is in the default tsconfig file that would trigger this particular compilation error

jetlogs commented Oct 6, 2016

I figured it out, the main issue is with the tsconfig.json

this version of tsconfig.json fails

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false,
    "mapRoot": "/",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../../site-main-php/src/main/webapp/public/js/compiled",
    "rootDir": "./",
    "inlineSources": true
  }
}

this version of tsconfig-aot.json works:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": false,
    "mapRoot": "/",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../../site-main-php/src/main/webapp/public/js/compiled",
    "rootDir": "./",
    "inlineSources": true
  },
  "files": [
    "app/polyfill.ts",
    "app/vendor.ts",
    "app/common-app.ts",
    "app/shared-player.ts",
    "app/quiz-app.ts",
    "./typings.d.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

now the question is what is in the default tsconfig file that would trigger this particular compilation error

@cichacz

This comment has been minimized.

Show comment
Hide comment
@cichacz

cichacz Oct 11, 2016

Since signature of registerAnimationOutput has changed, this issue is no longer observable on my side (angular 2.0.2).
Compiler output:

this.registerAnimationOutput(
    this._el_0,   
    'fadeInOut', 
    'done', 
    this.eventHandler(this._handle_fadeInOut_0_1.bind(this))
);

cichacz commented Oct 11, 2016

Since signature of registerAnimationOutput has changed, this issue is no longer observable on my side (angular 2.0.2).
Compiler output:

this.registerAnimationOutput(
    this._el_0,   
    'fadeInOut', 
    'done', 
    this.eventHandler(this._handle_fadeInOut_0_1.bind(this))
);
@tsoposki

This comment has been minimized.

Show comment
Hide comment
@tsoposki

tsoposki Oct 11, 2016

Cool! It is also working for me on angular "2.0.2"

Cool! It is also working for me on angular "2.0.2"

matsko added a commit to matsko/angular that referenced this issue Oct 14, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 17, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 17, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 17, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 18, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 18, 2016

matsko added a commit to matsko/angular that referenced this issue Oct 18, 2016

@alxhub alxhub closed this in 6e5f8b5 Oct 19, 2016

@matsko

This comment has been minimized.

Show comment
Hide comment
@matsko

matsko Oct 19, 2016

Member

Given that animation outputs are codegen'd in internally now, this should compile now. Please reopen the issue if it's still here.

Member

matsko commented Oct 19, 2016

Given that animation outputs are codegen'd in internally now, this should compile now. Please reopen the issue if it's still here.

btrigueiro added a commit to btrigueiro/angular that referenced this issue Oct 21, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment