-aot flag not generating proper build

Ionic Framework ionic-v3
1

Hi,

I have a browser project and I used to build it with:
ionic build --minifyjs --minifycss --aot --release

It used to generated the files in the www folder, there I could open the index.html normally and everything would work fine, locally and on the host.

These days I got a warning saying my npm or node was old and I decided to update them, however now, the --aot flag once passed in the build command, generates a build that doesn’t not work (shows only the page background but doesn’t move forward as if the start method wasn’t called to run the application). If I remove the --aot it will work fine but the problem is that it takes much more time now.

If I open the Developer Tools on the build that is failing (with --aot), it doesn’t show any error messages, nothing. I’m having hard time trying to figure out what is wrong here.

Could someone please assist me?

Thanks!

Ionic:

   Ionic CLI          : 5.2.4 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.8
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/moreirac/Library/Android/sdk)
   NodeJS            : v10.16.2 (/usr/local/bin/node)
   npm               : 2.15.12
   OS                : macOS Mojave

  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic/storage": "^2.2.0",
    "@pluritech/ion-mask": "^1.2.0",
    "@sentry/browser": "^5.6.1",
    "@sentry/cli": "^1.47.1",
    "@types/intro.js": "^2.4.5",
    "angular-sortablejs": "^2.7.0",
    "browser-image-compression": "0.0.3",
    "chart.js": "^2.8.0",
    "chartjs-plugin-datalabels": "^0.3.0",
    "chartjs-plugin-deferred": "^1.0.1",
    "chartnew.js": "^3.9.0",
    "clipboard": "^2.0.4",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^6.3.5",
    "firebaseui": "^3.6.1",
    "intro.js": "^2.9.3",
    "ionic-angular": "^3.9.8",
    "ionic-app-lib": "^2.2.1",
    "ionic-stepper": "^1.1.0",
    "ionic-tags-input": "^0.1.2",
    "ionicons": "3.0.0",
    "minimatch": "^3.0.4",
    "ng-circle-progress": "^1.4.1",
    "ng2-charts": "^1.6.0",
    "ng2-file-upload": "^1.3.0",
    "ng2-odometer": "^1.1.3",
    "ngx-currency-mask": "^4.3.2",
    "ngx-pica": "^1.1.4",
    "promise-polyfill": "^7.1.2",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "rxjs-tslint": "^0.1.7",
    "sjcl": "^1.0.8",
    "sortablejs": "^1.9.0",
    "survey-angular": "^1.1.3",
    "surveyjs-widgets": "^1.1.3",
    "sw-toolbox": "3.6.0",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.4",
    "typescript": "^2.9.2"
  },

Thanks in advance!

2

This combo is the first thing that jumps out at me. I suspect that you will need to synchronize at least major versions of Angular Material and Angular itself.

3

Hi rapropos,

I have created a blank app and when I build this one with --aot it properly generates the build fine, this means that the problem I’m facing on my project has to do with some library most likely as you correctly mentioned. However I cannot identify which conflict that is. I have copied all src code from my project over to this new blank app and ran npm install as I try to build it, so that all libraries start to go to package.json (I’m using --save on the npm command).

Unfortunately, after I installed all libraries, and successfully built the project, it presents now the same problem as my project.

This is what my package.json has now:

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic/storage": "2.2.0",
    "@pluritech/ion-mask": "^1.2.0",
    "@sentry/browser": "^5.6.1",
    "@types/chart.js": "^2.7.56",
    "angular-sortablejs": "^2.7.0",
    "browser-image-compression": "^1.0.6",
    "chart.js": "^2.8.0",
    "chartjs-plugin-datalabels": "^0.6.0",
    "chartjs-plugin-deferred": "^1.0.1",
    "chartnew.js": "^3.9.0",
    "clipboard": "^2.0.4",
    "cordova-browser": "5.0.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^6.3.5",
    "intro.js": "^2.9.3",
    "ionic-angular": "3.9.5",
    "ionic-stepper": "^1.1.0",
    "ionic-tags-input": "^0.1.2",
    "ionicons": "3.0.0",
    "ng-circle-progress": "^1.4.1",
    "ng2-charts-x": "^2.0.6",
    "ng2-file-upload": "^1.3.0",
    "ng2-odometer": "^1.1.3",
    "ngx-currency-mask": "^4.3.2",
    "ngx-pica": "^1.1.4",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.5.2",
    "rxjs-tslint": "^0.1.7",
    "survey-angular": "^1.1.3",
    "surveyjs-widgets": "^1.1.3",
    "sw-toolbox": "3.6.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "3.5.2"
  },
  "description": "",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Thanks!

4

I had to check library by library and after I did this (long time) I managed to get it working with the following combination:


    "rxjs": "6.3.3",
    "rxjs-compat": "6.3.3"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "~2.6.2"
  },