Ionic 5 Angular 11 Cordova build prod – random runtime errors: said method is not a function

Issue

I’ve recently upgraded from Ionic 4 Angular 8 to Ionic 5 Angular 11. Everything runs fine in the browser (ionic build --prod) and Android debug build (ionic cordova build android). When I build for Android production mode (ionic cordova build android --prod) I encounter random runtime errors such as:

this.service.method is not a function

e.service.method is not a function

These errors do not result in crashes, the app runs fine afterwards, but some functions are broken. This happens only for some services and methods called in components and pages, without any pattern that I can find. What could possibly be the cause?

Will add more detail but at the moment have no clue where to start.

Solution

I have found the solution but still posted as I consider this to be a major problem in the build process if you are not careful as it can silently break your project in random places without any clear warning.

During the build, I got some warnings which I (obviously) ignored such as:

Warning: <path>/app-components-generic.module.ts depends on 'angular2-chartjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

These “optimization bailouts” actually seem to be breaking the references between optimized and non-optimized modules which will obviously mess things up and cause the application to break at random places. This is actually my best guess as the official Angular documentation does not provide such warnings.

Here is how I fixed it:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     ...
     "allowedCommonJsDependencies": [
       "angular2-chartjs",
        ...
     ]
     ...

References:

Answered By – Alex Predescu

Leave a Comment