Error when build for production on Android

Ionic Framework
1

I am trying to build my project for android with production settings for the first time, and I am getting some weird errors that are not present when build for dev:

Warning: Can't resolve all parameters for LocalFile in 
/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/src/app/services/data.service.ts:
 (?, ?, ?). This will become an error in Angular v6.x

ERROR in : Error: Internal error: unknown identifier []
    at Object.importExpr$$1 [as importExpr] (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:24170:27)
    at /Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:18100:37
    at Array.map (<anonymous>)
    at InjectableCompiler.depsArray (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:18066:25)
    at InjectableCompiler.factoryFor (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:18130:36)
    at InjectableCompiler.injectableDef (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:18149:44)
    at InjectableCompiler.compile (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:18159:106)
    at /Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:24015:90
    at Array.forEach (<anonymous>)
    at AotCompiler._emitPartialModule2 (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:24015:25)
    at /Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:24008:48
    at Array.reduce (<anonymous>)
    at AotCompiler.emitAllPartialModules2 (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler/bundles/compiler.umd.js:24007:26)
    at AngularCompilerProgram._emitRender2 (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler-cli/src/transformers/program.js:300:31)
    at AngularCompilerProgram.emit (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@angular/compiler-cli/src/transformers/program.js:201:22)
    at AngularCompilerPlugin._emit (/Users/victorespina/Work/Fuentes/NOI/DEV/ptech/qas/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:879:49)

This is my version info:

Ionic:

   Ionic CLI                     : 5.2.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 11 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/victorespina/Library/Android/sdk)
   NodeJS            : v10.16.0 (/usr/local/bin/node)
   npm               : 6.10.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

and my angular.json:

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "src/app/app.scss"
              }
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

Any clues about this would be very appreciated.

2

Remove platform and add it then try again

3

Thanks for your answer. Removed android platform with:

ionic cordova platform remove android

and added it again with:

ionic cordova platform add android

The process completed with no erros, but this warning:

35%20PM
Screen Shot 2019-08-19 at 3.41.35 PM.png828×267 67.8 KB

I then tried to build the project again with:

ionic cordova build android --prod

but got the same error I had before. Then I tried to install cordova-res as suggested after adding the android platform, but got errors during the install:

Administrators-Mac-mini:~ administrator$ sudo npm i -g cordova-res
/usr/local/bin/cordova-res -> /usr/local/lib/node_modules/cordova-res/bin/cordova-res

> sharp@0.22.1 install /usr/local/lib/node_modules/cordova-res/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

ERR! sharp EACCES: permission denied, mkdir '/Users/administrator/.npm/_libvips'
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/page/install for required dependencies
gyp WARN EACCES user "nobody" does not have permission to access the dev dir "/Users/administrator/Library/Caches/node-gyp/10.16.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/cordova-res/node_modules/sharp/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/cordova-res/node_modules/sharp/.node-gyp'
gyp ERR! System Darwin 18.7.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/cordova-res/node_modules/sharp
gyp ERR! node -v v10.16.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.22.1 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sharp@0.22.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/administrator/.npm/_logs/2019-08-19T19_43_59_503Z-debug.log
4

I had to use elevated permissions to install cordova res.

5

Do you mean sudo? because I did use sudo to try the install.

6

Yep, that’s what I meant. Wish I could be more help.

7

maybe investigate reassigning permissions on that directory? I saw a post from an Ionic team member about it.

8

Yes, I think I saw it too. He saids something about weird permission problems when using npm with and without sudo. In my particular case, my normal working account has no Administrator level neither is in the sudoers file. So, when I need to do things that requires sudo, I login as Administraor in a terminal window and perform the task there. With ionic, what I do is that any npm global install (npm -g) I run it with sudo on the Administrator account, and local installs (like a plugin for a particular project) I run it on my personal accout.

I think this may be causing my current problem but, to be honest, I don’t feel too confortable messing around with permissions, so I will leave that path as my last choice. For now I can resolve using the normal build procedure.

1 Like
9

Thanks to this link, I finally get cordova-res installed with this command:

sudo npm i -g cordova-res --unsafe-perm

And now I can build my two Ionic projects with the --prod flag without problems!!

2 Likes
10

This solved my problem. Thanks!