Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

AnimationBuilder not working in a child component when compiled with AOT #413

Closed
berchik opened this issue Jan 21, 2018 · 1 comment
Closed

Comments

@berchik
Copy link

berchik commented Jan 21, 2018

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"
  },
@sis0k0
Copy link
Contributor

sis0k0 commented Jan 21, 2018

This issue was moved to NativeScript/nativescript-angular#1163

@sis0k0 sis0k0 closed this as completed Jan 21, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants