AnimationBuilder not working in a child component when compiled with AOT

[sis0k0]

From @berchik on January 21, 2018 13:14

I’m trying to use AnimationBuilder in a child component, but it fails when bundling with webpack and aot (testing Win10/Android). The parent component uses:

<ScrollView #scrl>
    <item-full-info [id]="id" [name]="codeName" (click)="codeClicked($event)"></item-full-info>
</ScrollView>

The child component (item-full-info) has this animation method fired on ngOnChanges:

makeAnimation() {
        const anim = this.anibld.build([
            style({ "opacity": 0 }),
            animate(600, style({ "opacity": 1 })) ]);     
        const player = anim.create(this.stk.nativeElement);     
        
        const anim2 = this.anibld.build([
            style({ "opacity": 0, "transform": 'scale(0.7, 0.7)' }),
            animate('500ms ease-out', style({ "opacity": 1, "transform": 'scale(1, 1)' }))]);   
        const player2 = anim2.create(this.header.nativeElement);     
        
        player.play(); player2.play();        
    }

Everything works, but when I use AOT with webpack the animation is not working - everything else is fine.

$ tns run android > animation is working ok
$ tns run android --env.aot > animation is working ok
$ tns run android --bundle > animation is working ok
$ tns run android --bundle --env.aot > animation is NOT working

package.json:

"dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-gradient": "^2.0.1",
    "nativescript-pro-ui": "3.3.0",
    "nativescript-sqlite": "^2.0.1",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^5.5.0",
    "tns-core-modules": "next",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.2",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.9",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.1",
    "nativescript-dev-typescript": "^0.6.0",
    "nativescript-dev-webpack": "^0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.2",
    "webpack-sources": "~1.1.0"
  },

Copied from original issue: NativeScript/nativescript-dev-webpack#413

[berchik]

Tested with nativescript-angular next on my app, can confirm it is now working correctly on android with
--bundle --env.aot.

Thanks!