Ionic Angular build not building with correct styles to android

Capacitor
1

I have an Ionic V7.2.0 project using capacitor to build to android ionic capacitor build android.
Capcitor config:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'sa.davinci',
  appName: 'S.A. DaVinci',
  webDir: 'www/browser'
};

export default config;

Now when i Build it its all okay no issue, only that once the application starts all core elements such as ion-button, ion-input, ion-list, ion-item, ion-header have lost their styling…

This means any ion-input doesn’t actually function for me, and same for the integrated ion-split for the menu capability it offers. They do all work on ionic serve, and if you run the android build using live reload (As this just loads the URL to your device).

Why when I build it for native use, the styles get messed up?
If any addiontal info is needed feel free to ask me! Not sure what to share.

Some version info:
Test Device: Android 13
Java Environment: Java 17
Gradle: Gradle 8.5
Android Studio: Hedhog
Ionic: 7.2.0
Build using Angular

Ionic config:

{
  "name": "sa-davinci",
  "integrations": {
    "capacitor": {},
    "cordova": {}
  },
  "type": "angular-standalone"
}

Capacitor result on build:

> ng.cmd run app:build

Initial Chunk Files   | Names                            |   Raw Size | Estimated Transfer Size
chunk-HE7GT4XE.js     | -                                |  381.39 kB |                89.97 kB
main-YDI54ZLN.js      | main                             |  196.24 kB |                31.65 kB
chunk-54F6FKE4.js     | -                                |   34.76 kB |                11.42 kB
polyfills-UBOHCPVH.js | polyfills                        |   33.13 kB |                10.79 kB
styles-TNGNYUTJ.css   | styles                           |   27.01 kB |                 4.33 kB
chunk-MXEONTSK.js     | -                                |   23.89 kB |                 8.29 kB
chunk-UPRIBWWW.js     | -                                |   10.99 kB |                 3.94 kB
chunk-467TPZ4A.js     | -                                |    9.97 kB |                 2.57 kB
chunk-QERUKDK6.js     | -                                |    9.93 kB |                 2.56 kB
chunk-5U2FUULQ.js     | -                                |    8.25 kB |                 3.04 kB
chunk-W7MPH5IC.js     | -                                |    6.30 kB |                 2.24 kB
chunk-Z4V4M3ZT.js     | -                                |    5.69 kB |                 2.09 kB
chunk-72ZMTLHO.js     | -                                |    3.98 kB |                 1.48 kB
chunk-WXXWTGDW.js     | -                                |    3.61 kB |                 1.28 kB
chunk-2EOHHFOF.js     | -                                |    3.27 kB |                 1.47 kB
chunk-WVZ2ABIN.js     | -                                |    3.09 kB |                 1.35 kB
chunk-QL7AOM23.js     | -                                |    2.72 kB |                 1.05 kB
chunk-RRNB6ECX.js     | -                                |    2.71 kB |                 1.01 kB
chunk-JXIEZMHN.js     | -                                |    2.47 kB |               735 bytes
chunk-4PGTP63H.js     | -                                |    1.66 kB |               710 bytes
chunk-RJ5GXQEX.js     | -                                |    1.50 kB |               680 bytes
chunk-QPVVTFFW.js     | -                                | 1022 bytes |              1022 bytes
chunk-SVHWGHER.js     | -                                |  979 bytes |               979 bytes
chunk-HC6MZPB3.js     | -                                |  962 bytes |               962 bytes
chunk-FGXSCDI4.js     | -                                |  946 bytes |               946 bytes
chunk-POU3PQSJ.js     | -                                |  876 bytes |               876 bytes
chunk-BAYK5CMB.js     | -                                |  796 bytes |               796 bytes
chunk-FQ65QLOX.js     | -                                |  762 bytes |               762 bytes
chunk-KGZGLNA4.js     | -                                |  686 bytes |               686 bytes
chunk-A73CKFRS.js     | -                                |  686 bytes |               686 bytes
chunk-CVNAKU4L.js     | -                                |  573 bytes |               573 bytes
chunk-J6ICYO4L.js     | -                                |  557 bytes |               557 bytes
chunk-G3CV3VGG.js     | -                                |  240 bytes |               240 bytes
chunk-MM5QLNJM.js     | -                                |  240 bytes |               240 bytes
chunk-4U6PRYVA.js     | -                                |  126 bytes |               126 bytes
chunk-MCRJI3T3.js     | -                                |   99 bytes |                99 bytes
chunk-LF5XB4YN.js     | -                                |   99 bytes |                99 bytes

                      | Initial Total                    |  781.99 kB |               192.03 kB

Lazy Chunk Files      | Names                            |   Raw Size | Estimated Transfer Size
chunk-2WNWRKHP.js     | core-js                          |   91.84 kB |                27.75 kB
chunk-YXYGNERJ.js     | ion-item_8-entry                 |   80.11 kB |                 8.51 kB
chunk-ISXZ46MT.js     | ion-datetime_3-entry             |   71.90 kB |                12.91 kB
chunk-FC5IJWRU.js     | ion-textarea-entry               |   56.17 kB |                 6.02 kB
chunk-N4YUXGRG.js     | ion-input-entry                  |   49.08 kB |                 6.00 kB
chunk-OZCBHLQP.js     | ion-select_3-entry               |   42.68 kB |                 6.96 kB
chunk-HK22U3UB.js     | ion-app_8-entry                  |   38.40 kB |                 8.12 kB
chunk-MWP3O3GJ.js     | ion-alert-entry                  |   35.79 kB |                 5.99 kB
chunk-TYQTF2CF.js     | ion-range-entry                  |   31.49 kB |                 5.58 kB
chunk-2OK25GTO.js     | ion-modal-entry                  |   26.63 kB |                 6.39 kB
chunk-E4LHUVK6.js     | ion-segment_2-entry              |   26.00 kB |                 4.58 kB
chunk-UZ2GJYMH.js     | ion-button_2-entry               |   25.57 kB |                 4.96 kB
chunk-7FYJH3T4.js     | ion-searchbar-entry              |   24.51 kB |                 3.83 kB
chunk-ENTJKBEQ.js     | ion-toggle-entry                 |   24.50 kB |                 3.79 kB
chunk-75SCQLPS.js     | ion-refresher_2-entry            |   24.10 kB |                 4.68 kB
chunk-6NFN5BFS.js     | ion-popover-entry                |   23.22 kB |                 5.50 kB
chunk-M6G5N6LU.js     | ion-menu_3-entry                 |   22.37 kB |                 4.50 kB
chunk-LT6OETHP.js     | ion-tab-bar_2-entry              |   21.72 kB |                 3.00 kB
chunk-PMZUCQYI.js     | ion-fab_3-entry                  |   21.25 kB |                 3.31 kB
chunk-DDSGZRKW.js     | ion-radio_2-entry                |   20.95 kB |                 3.63 kB
chunk-FWJRSYQW.js     | ion-action-sheet-entry           |   20.82 kB |                 3.62 kB
chunk-3CCBQ7LK.js     | ion-toast-entry                  |   20.11 kB |                 4.69 kB
chunk-EDDIIBVX.js     | ion-item-option_3-entry          |   19.07 kB |                 3.40 kB
chunk-SYBO6PC4.js     | ion-progress-bar-entry           |   18.45 kB |                 1.57 kB
chunk-BZZMFO3J.js     | ion-checkbox-entry               |   18.32 kB |                 2.85 kB
chunk-5X4HMWFG.js     | dom                              |   18.04 kB |                 4.98 kB
chunk-ZOKA7NAM.js     | ion-breadcrumb_2-entry           |   12.84 kB |                 2.45 kB
chunk-QCGJQKZZ.js     | -                                |   12.68 kB |                 3.96 kB
chunk-33ZEUQO2.js     | ion-accordion_2-entry            |   12.01 kB |                 2.76 kB
chunk-Z6KIWOAU.js     | ion-nav_2-entry                  |   11.75 kB |                 3.62 kB
chunk-ACH5OTP5.js     | ion-back-button-entry            |   11.08 kB |                 1.95 kB
chunk-FYJP5Z3W.js     | ion-picker-internal-entry        |   10.85 kB |                 2.08 kB
chunk-TVVNZ74L.js     | ion-route_4-entry                |   10.56 kB |                 3.52 kB
chunk-VAUNIME2.js     | ion-card_5-entry                 |   10.25 kB |                 1.83 kB
chunk-X5DMZIDR.js     | ion-loading-entry                |    8.76 kB |                 2.13 kB
chunk-24K3JWIW.js     | ion-col_3-entry                  |    8.51 kB |                 1.33 kB
chunk-7OSZC7LX.js     | ion-picker-column-internal-entry |    7.02 kB |                 1.93 kB
chunk-SBWFF7NH.js     | ion-chip-entry                   |    6.30 kB |               931 bytes
chunk-3AWOY4XV.js     | ion-datetime-button-entry        |    6.02 kB |                 1.73 kB
chunk-ICFSPPOM.js     | -                                |    5.77 kB |               978 bytes
chunk-PI5WIUNY.js     | ion-infinite-scroll_2-entry      |    5.70 kB |                 1.37 kB
chunk-X5YM42F3.js     | ion-spinner-entry                |    5.59 kB |                 1.24 kB
chunk-6E7R7FWS.js     | ion-reorder_2-entry              |    5.46 kB |                 1.89 kB
chunk-3BFTYKZO.js     | ion-split-pane-entry             |    5.43 kB |                 1.21 kB
chunk-3BHRJB3V.js     | input-shims-6539ce13             |    4.85 kB |                 1.87 kB
chunk-SOKS23L6.js     | input-shims                      |    4.83 kB |                 1.85 kB
chunk-MAVLLQCE.js     | shadow-css                       |    4.49 kB |                 1.95 kB
chunk-2HIF6ZEH.js     | card-page                        |    4.04 kB |                 1.54 kB
chunk-KLFJ66E2.js     | ion-tab_2-entry                  |    3.81 kB |                 1.25 kB
chunk-QDVJ7GDG.js     | events-page                      |    3.35 kB |                 1.30 kB
chunk-3GK33O5I.js     | tickets-page                     |    3.20 kB |                 1.24 kB
chunk-GHA7ODF2.js     | ion-avatar_3-entry               |    3.15 kB |               669 bytes
chunk-EBLPDTK3.js     | ion-ripple-effect-entry          |    3.03 kB |               908 bytes
chunk-HKMGSH73.js     | log-in-page                      |    2.99 kB |                 1.19 kB
chunk-KAIZISGW.js     | benefits-page                    |    2.71 kB |                 1.13 kB
chunk-IDKTFHDL.js     | logout-page                      |    1.94 kB |               829 bytes
chunk-JPULQNGN.js     | index-82eeb47f                   |    1.79 kB |               813 bytes
chunk-DLMGSKRN.js     | index9                           |    1.79 kB |               816 bytes
chunk-GONYFC5Q.js     | ion-img-entry                    |    1.70 kB |               669 bytes
chunk-YMBYCOQ3.js     | ion-backdrop-entry               |    1.50 kB |               513 bytes
chunk-I4SRGBFB.js     | -                                |    1.34 kB |               486 bytes
chunk-C6TWYN5N.js     | -                                |    1.32 kB |               421 bytes
chunk-F4M7WZNY.js     | -                                |    1.09 kB |               596 bytes
chunk-3WOICACO.js     | -                                |    1.02 kB |               480 bytes
chunk-JE3FXFC3.js     | -                                | 1022 bytes |              1022 bytes
chunk-CBD5FBXD.js     | focus-visible                    |  952 bytes |               952 bytes
chunk-O43IGWDR.js     | -                                |  949 bytes |               949 bytes
chunk-GJZKZXL4.js     | -                                |  908 bytes |               908 bytes
chunk-UL33PJRA.js     | -                                |  890 bytes |               890 bytes
chunk-N73HJHFS.js     | swipe-back-a6f386fc              |  713 bytes |               713 bytes
chunk-ALMM4EDS.js     | swipe-back                       |  685 bytes |               685 bytes
chunk-UVZK7GXH.js     | -                                |  655 bytes |               655 bytes
chunk-M6VOCRC6.js     | -                                |  640 bytes |               640 bytes
chunk-AM5QOFK7.js     | status-tap-129c01cf              |  567 bytes |               567 bytes
chunk-WA4ZFFPY.js     | status-tap                       |  567 bytes |               567 bytes
chunk-HU6UQ5WL.js     | -                                |  510 bytes |               510 bytes
chunk-G3ZNBEWN.js     | -                                |  505 bytes |               505 bytes
chunk-ASGNNUHY.js     | keyboard-52278bd7                |  432 bytes |               432 bytes
chunk-GOWQWRZR.js     | -                                |  413 bytes |               413 bytes
chunk-ZNTSHO7F.js     | keyboard2                        |  404 bytes |               404 bytes
chunk-HMA5E7UC.js     | ion-text-entry                   |  384 bytes |               384 bytes
chunk-KHZUN65W.js     | ios-transition-62fd50ab          |  254 bytes |               254 bytes
chunk-AUYZAENT.js     | md-transition-7e56966a           |  239 bytes |               239 bytes
chunk-CTHDILOP.js     | ios-transition                   |  226 bytes |               226 bytes
chunk-OZYUQAHZ.js     | md-transition                    |  211 bytes |               211 bytes
chunk-OMB27VJZ.js     | -                                |  205 bytes |               205 bytes
chunk-SXA2UH3I.js     | hardware-back-button-b2bc76db    |  201 bytes |               201 bytes
chunk-RLISJUFA.js     | hardware-back-button             |  201 bytes |               201 bytes
chunk-H6Q4N4JF.js     | -                                |  182 bytes |               182 bytes
chunk-KJEAW3G2.js     | index-2cf77112                   |  155 bytes |               155 bytes
chunk-7VSVCZ7D.js     | -                                |  126 bytes |               126 bytes
chunk-SCFSEHTE.js     | index3                           |  117 bytes |               117 bytes
chunk-WMEG6PAA.js     | -                                |  101 bytes |               101 bytes
chunk-PAOTEET3.js     | focus-visible-dd40d69f           |   95 bytes |                95 bytes

Application bundle generation complete. [4.450 seconds]
▲ [WARNING] The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]

    node_modules/@stencil/core/internal/client/index.js:3781:2:
      3781 │   `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVers...
           ╵   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


▲ [WARNING] 20 rules skipped due to selector errors:
  :host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir


> capacitor.cmd sync android
[capacitor] √ Copying web assets from browser to android\app\src\main\assets\public in 300.75ms
[capacitor] √ Creating capacitor.config.json in android\app\src\main\assets in 1.04ms
[capacitor] √ copy android in 337.40ms
[capacitor] √ Updating Android plugins in 5.05ms
[capacitor] [info] Found 6 Capacitor plugins for android:
[capacitor]        @capacitor/app@6.0.0-beta.1
[capacitor]        @capacitor/device@6.0.0-beta.1
[capacitor]        @capacitor/haptics@6.0.0-beta.1
[capacitor]        @capacitor/keyboard@6.0.0-beta.1
[capacitor]        @capacitor/splash-screen@6.0.0-beta.1
[capacitor]        @capacitor/status-bar@6.0.0-beta.1
[capacitor] √ update android in 87.90ms
[capacitor] [info] Sync finished in 0.428s

[INFO] Ready for use in your Native IDE!

       To continue, build your project using Android Studio!

> capacitor.cmd open android
[capacitor] [info] Opening Android project at: android.
2

Make sure that your build process correctly includes all necessary CSS files. The Ionic components require their corresponding CSS files for proper styling, so if these files are not included or are misplaced during the build process, it couls result in unstyleized components.

3

Have you tried testing on another device?

4

Yes, same result when I have tried it on my Tablet, which runs on Android 10

Image attached below for bit more clarity:

Screenshot_20240119-115155_SA DaVinci
Screenshot_20240119-115155_SA DaVinci2560×1600 110 KB

While on pc it looks like:
Screenshot 2024-01-19 115513

5

I have the same problem.
I think that it is not only the CSS part which is not working, but also some TypeScript instructions.

For example I have a page that contains 2 buttons and a label for selecting an amount of a product. When the amount reaches 0 it disables the “less button” and when the amount reaches the max amount allowed it disables the “more button”. The code works fine in the browser but when I build the android version, apart from the CSS being broken, the buttons updates the amount value but are not disabled when the minimum or maximum amount is reached.

The HTML code :

<div class="product-amount-container">
      <ion-button color="primary" class="button-amount" [disabled]="buttonLessDisabled" (click)="amountLessPressed()">
        <ion-icon name="remove-outline"></ion-icon>
      </ion-button>
      <ion-label>{{product.amount}}</ion-label>
      <ion-button color="primary" class="button-amount" [disabled]="buttonMoreDisabled" (click)="amountMorePressed()">
        <ion-icon name="add-outline"></ion-icon>
      </ion-button>
    </div>

The TS code:


  updateAmountStates(){
    this.buttonLessDisabled = (this.product.amount <= 1);
    this.buttonMoreDisabled = (this.product.amount >= this.maxAmount);
    this.finalPrice = (this.product.amount * this.product.base_price).toFixed(2);
  }

  amountLessPressed(){
    this.product.amount -= 1;
    this.updateAmountStates();  
  }

  amountMorePressed(){
    this.product.amount += 1;
    this.updateAmountStates(); 
  }

I think maybe it could be some problem of android permissions that does not allow the access to some sctripts or files but I do not really know.

6

I have currently resolved it by starting a new project through the Appflow dashboard: https://dashboard.ionicframework.com/. Once i created a project through there and build it on the dashboard itself it seems to workout fine.

Don’t know why it now suddenly works fine, also local building seems to work again for that project. Not the other one. So I assume there is a config issue or something. But all configs where generated through the ionic commands.

7

Creating a new project through the Appflow dashboard will make your project use NgModules instead of Standalone Components.
I think I have found the problem on this thread https://github.com/ionic-team/ionic-framework/issues/28385 where the problem is caused by the build optimizer in production. You can use the command ionic serve --prod and the web result will have the same problems that we have in the android version.

One solution mentioned there is disabling the build optimizer in production in the angular.json file like this:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "buildOptimizer": false,
              ...
            }
            ...
          }
          ...
        }
        ...
      }
      ...
    }
    ...
  }
  ...
}

Then rebuild your app using ionic build and then build the android version.

There are other solutions mentioned in the thread like this one https://github.com/ionic-team/ionic-framework/issues/28385#issuecomment-1789437096 but I dont understand how it works so I don’t know how to use it.

Also I want to mention that this is a temporal solution and I would like to know how to solve it whithout having to disable the build optimizer.

1 Like