AOT compilation of animation callbacks

[cichacz]

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]

Same problem here

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

[jetfontanilla]

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"
  }

[jetfontanilla]

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]

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]

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

[matsko]

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}