Builds succeed but app doesn't work with AOT flag (solved)


#1

Is this a known issue? My app works as expected when built in debug and release mode with all optimization flags except the AOT flag. Here’s a minimum example template that breaks (ie. nothing is displayed) on both platforms when the AOT flag is provided during build:

<GridLayout rows="*">

  <StackLayout row="0"
              *ngIf="!isSigningUp">
    <Label text="Hello!"></Label>
    <Button (tap)="signUp()"></Button>
  </StackLayout>

  <ActivityIndicator [busy]="isSigningUp"
                     *ngIf="isSigningUp"
                     row="0"></ActivityIndicator>
</GridLayout>

Any known fixes would be appreciated! Otherwise I can switch to using the visibility property.

edit:
here are the package versions I’m building with:

  "nativescript": {
    "id": "com.freshlytyped.dev",
    "tns-ios": {
      "version": "4.1.0"
    },
    "tns-android": {
      "version": "4.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "nativescript-angular": "^6.0.0",
    "nativescript-braintree": "^1.0.8",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-listview": "^3.5.7",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "tns-core-modules": "^4.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/compiler-cli": "^6.0.3",
    "@ngtools/webpack": "~6.0.3",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.7.1",
    "nativescript-dev-webpack": "^0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "typescript": "2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  }

#3

It must be something wrong within the project, can you post the controller code too?


#4

It works perfectly when I build without the AOT flag, or when I use a visibility binding instead of *ngIf. But yes I can post the component code when I get home (there’s not much going on in that component). Are you saying *ngIf works fine for you with tns 4.1.0 when you build with tns build ios|android --bundle --env.aot ?


#5

Yes, it does work for me. Let’s see what you have in the component side.


#6

Ah! Thanks for confirming that. After digging around for a while longer I realized that my main.aot.ts file wasn’t up to date with my latest main.ts, so AOT builds were missing a couple of imports. The lack of build failure is why I didn’t suspect that initially.

Lesson learned: start with main.aot.ts when an issue is specific to AOT builds.


Error when build with --aot