Closed
Description
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
Activity
fix(animations): provide fake document object in both AoT and JiT mode
fix(animations): provide fake document object in both AoT and JiT mode (
berchik commentedon Jan 23, 2018
Tested with nativescript-angular next on my app, can confirm it is now working correctly on android with
--bundle --env.aot.Thanks!