Building Angular 5 with AOT is very slow and memory consuming

Question

I just migrated from Angular 4 to Angular 5, hoping to save some precious seconds every time my app rebuilds.

From https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced :

Our goal was to make AOT compilation fast enough so that developers could use it for development, eliminating the differences that developers sometimes run into when trying to go to production for the first time. The team has hit its 2 second incremental AOT rebuild performance targets, and will be turning AOT on by default in a future release of the CLI.

Here is my new package.json :

"dependencies": {
    "@angular/animations": "^5.0.5",
    "@angular/common": "^5.0.5",
    "@angular/core": "^5.0.5",
    "@angular/compiler": "^5.0.5",
    "@angular/compiler-cli": "^5.0.5",
    "@angular/forms": "^5.0.5",
    "@angular/http": "^5.0.5",
    "@angular/platform-browser": "^5.0.5",
    "@angular/platform-browser-dynamic": "^5.0.5",
    "@angular/platform-server": "^5.0.5",
    "@angular/router": "^5.0.5",
    "@auth0/angular-jwt": "^1.0.0-beta.9",
    "@types/googlemaps": "^3.26.11",
    "@types/lodash": "^4.14.77",
    "@types/quill": "^1.3.3",
    "angular2-moment": "^1.0.0",
    "bootstrap": "^3.3.6",
    "datatables.net": "^1.10.16",
    "datatables.net-scroller": "^1.4.1",
    "es6-shim": "^0.35.2",
    "lodash": "^4.17.4",
    "moment": "^2.17.1",
    "ng2-dragula": "^1.5.0",
    "primeng": "^5.0.2",
    "quill": "1.2.4",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "systemjs": "^0.20.12",
    "ts-helpers": "^1.1.1",
    "typescript": "2.4.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.5",
    "@types/datatables.net": "^1.10.6",
    "@types/jasmine": "2.5.47",
    "@types/jquery": "^2.0.45",
    "@types/node": "^7.0.18",
    "codelyzer": "~4.0.1",
    "jasmine-core": "2.6.1",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.2",
    "ts-node": "3.0.4",
    "tslint": "^5.2.0",
    "typescript": "2.4.2"
  }

Now that the migration is done, I have serious performance issues when building / rebuilding my app. As suggested, I now use ng serve --aot to test my code.

The problem is :

• The first build takes > 2Go of RAM and is very slow
• The first incremental rebuild fails because of a FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Here is the result of an AOT build :

Hash: 042c05f2f5f6996535b7
Time: 536793ms
chunk {account.module} account.module.chunk.js () 29.7 kB
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 15.6 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 952 kB [initial]
chunk {projet.module} projet.module.chunk.js () 38.3 kB
chunk {rapport.module} rapport.module.chunk.js () 991 kB
chunk {styles} styles.bundle.js (styles) 3.14 MB [initial]
chunk {vendor} vendor.bundle.js (vendor) 13 MB [initial]

webpack: Compiled successfully.

Did I missed something ? Is it really possible to use the AOT build in development ?

Answer 1

For the build being slow you can use this version of the angular cli:

"@angular/cli": "1.7.0-beta.0",

this cut my building time from 30 minutes to 3 minutes.

In Angular 5, AOT and build-optimizer are by default in prod builds.

ng build --prod --named-chunks adding --named-chunks.

to your build command will give you named chunks so you can better analyze you chunks, and better enhance what you are importing in each module. An example that maybe you are importing the whole shared module into a certain module while you just use one thing from that shared module