Ionic 3 - Android Build Release AOT - Not Copying Ionic Icons Font

#1

Hello,

PROBLEM:


Ionic icons is not appearing when build in release mode (android) (not tested yet in IOS)
So i notice is getting error 404 on font ionicons.ttf inside assets/fonts which are not being copy when build in release mode
Using ionic serve --lab , it work, and also in debug mode android also works.

ionic info



    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.4
    npm  : 5.6.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

PLUGINS:

cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-document-viewer 0.9.10 "SitewaertsDocumentViewer"
cordova-plugin-email-composer 0.8.15 "EmailComposer"
cordova-plugin-facebook4 2.2.0 "Facebook Connect"
cordova-plugin-googleplus 5.3.0 "Google SignIn"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.1 "SocialSharing"
cordova-plugin-youtube-video-player 1.0.6 "CordovaYoutubeVideoPlayer"
es6-promise-plugin 4.2.2 "Promise"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"
phonegap-plugin-push 2.1.3 "PushPlugin"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.2.1 "Launch Navigator"

package.json

{
  "name": "FSVAAPP",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/call-number": "^4.7.0",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/date-picker": "^4.7.0",
    "@ionic-native/document-viewer": "^4.7.0",
    "@ionic-native/email-composer": "^4.7.0",
    "@ionic-native/facebook": "^4.11.0",
    "@ionic-native/file": "^4.11.0",
    "@ionic-native/file-opener": "^4.11.0",
    "@ionic-native/file-transfer": "^4.11.0",
    "@ionic-native/google-plus": "^4.11.0",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/launch-navigator": "^4.11.0",
    "@ionic-native/push": "^4.11.0",
    "@ionic-native/social-sharing": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic-native/youtube-video-player": "^4.7.0",
    "@ionic/storage": "2.1.3",
    "android-versions": "^1.3.0",
    "angular-web-storage": "^2.0.0",
    "angular2-moment": "^1.9.0",
    "call-number": "^1.0.1",
    "cordova-android": "6.4.0",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-call-number": "^1.0.1",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-document-viewer": "^0.9.10",
    "cordova-plugin-email-composer": "^0.8.15",
    "cordova-plugin-facebook4": "^2.2.0",
    "cordova-plugin-googleplus": "^5.3.0",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "cordova-plugin-youtube-video-player": "^1.0.6",
    "cordova-support-google-services": "^1.1.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "mx.ferreyra.callnumber": "~0.0.2",
    "phonegap-plugin-push": "^2.1.3",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-camera": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-email-composer": {},
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "XXXXXXXX",
        "APP_NAME": "FSVA",
        "ANDROID_SDK_VERSION": "4.+"
      },
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.XXXXXXXXXXX-4reale37l236u7l1ifrp8d5151n8s0u6",
        "WEB_APPLICATION_CLIENT_ID": "XXXXXXXX-4reale37l236u7l1ifrp8d5151n8s0u6.apps.googleusercontent.com"
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "OKHTTP_VERSION": "3.+"
      },
      "mx.ferreyra.callnumber": {},
      "phonegap-plugin-push": {
        "FCM_VERSION": "11.6.2"
      }
    },
    "platforms": [
      "android"
    ]
  }
}
#2

All outdated.

Your Cordova tooling seems to be out of date, which might be causing all kinds of problems.
You can read about how to figure out the current Cordova versions and how to update CLI, platforms and plugins here: https://ionic.zone/cordova/update

#3

Hello,
Am updating cordova cli, the cordova platform android i cannot update due the incompatibility of some plugins used.

I will give feedback after update cordova cli

#4

Don’t forget ionic-app-scripts.

#5

Hi,
I update cordova to 8 and ionic app scripts to latest, but still not working.
I also re-install ionicicons (v4.3.0), which works in ionic serve, and also in android debug, but still not working in android release mode.

ionic info

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.11
    Cordova Platforms  : android 6.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.4
    npm  : 5.6.0
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

package.json

{
  "name": "FSVAAPP",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/call-number": "^4.7.0",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/date-picker": "^4.7.0",
    "@ionic-native/document-viewer": "^4.7.0",
    "@ionic-native/email-composer": "^4.7.0",
    "@ionic-native/facebook": "^4.11.0",
    "@ionic-native/file": "^4.11.0",
    "@ionic-native/file-opener": "^4.11.0",
    "@ionic-native/file-transfer": "^4.11.0",
    "@ionic-native/google-plus": "^4.11.0",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/launch-navigator": "^4.11.0",
    "@ionic-native/push": "^4.11.0",
    "@ionic-native/social-sharing": "^4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic-native/youtube-video-player": "^4.7.0",
    "@ionic/storage": "2.1.3",
    "android-versions": "^1.3.0",
    "angular-web-storage": "^2.0.0",
    "angular2-moment": "^1.9.0",
    "call-number": "^1.0.1",
    "cordova-android": "6.4.0",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-call-number": "^1.0.1",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-document-viewer": "^0.9.10",
    "cordova-plugin-email-composer": "^0.8.15",
    "cordova-plugin-facebook4": "^2.2.0",
    "cordova-plugin-googleplus": "^5.3.0",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "cordova-plugin-youtube-video-player": "^1.0.6",
    "cordova-support-google-services": "^1.1.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-angular": "3.9.2",
    "ionicons": "^4.3.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "mx.ferreyra.callnumber": "~0.0.2",
    "phonegap-plugin-push": "^2.1.3",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^4.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.11",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-camera": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-email-composer": {},
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "XXXXXX",
        "APP_NAME": "FSVA",
        "ANDROID_SDK_VERSION": "4.+"
      },
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.XXXXXXXXXX-4reale37l236u7l1ifrp8d5151n8s0u6",
        "WEB_APPLICATION_CLIENT_ID": "XXXXXXXXXXXXXXX-4reale37l236u7l1ifrp8d5151n8s0u6.apps.googleusercontent.com"
      },
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "OKHTTP_VERSION": "3.+"
      },
      "mx.ferreyra.callnumber": {},
      "phonegap-plugin-push": {
        "FCM_VERSION": "11.6.2"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

ionic.config.json

{
  "name": "FSVAAPP",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": { }
  }
}

When i run android in debug mode the ionic icons fonts is copied into “platforms\android\assets\www\assets\fonts” (woff and ttf) but that is not happening when i build in prod (release) mode which gives 404 when app load the icon font.

Not sure what am missing here, but is related with the building of the app, some kind of configuration.

#6

Hi,
Screenshot here, when i deploy to android device.

#7

Also, in iOS is not working. Any tip?

#8

i guess its related:

#9

Huh

? Are you sure those work with Ionic v3?

I would create a new project with ionic start and see if everything works there. The nyou know it is something about your project.

#10

Which version of ionicons i should use with ionic3 ?

#11

Which version of ionicons i should use with ionic3 ?
Shall i update ionic-angular ?

#12

Find out by creating a new project with ionic start and look at its dependencies.

#13

Even worst… the new project is not getting this, i copy src and add in config.xml and package.json the dependencys ( i keep the ones were similiar to the old project,so i saw some version upgrades)
but now i am stuck on this… at ionic serve everything goes smooth and also if i run ionic cordova run android, although if i put prod flag this happens :