SVG Icons not loading on Android

Hi!

After updating some packages in my Ionic and Capacitor application, the SVG icons no longer load only on Android. I’ve tested on IOS and browser and It works fine.
As you can see in the logcat snippet below, there is an error accessing localhost on port 80. I’ve tried to change the server.androidScheme to https, but the error persists, but on port 443.
Has anyone else had a similar problem?

Logcat snippet


2023-09-21 15:50:58.888  2839-2839  Capacitor/Plugin        br.com.poliview.Siecon               V  To native (Capacitor plugin): callbackId: 128851486, pluginId: CapacitorHttp, methodName: request
2023-09-21 15:50:58.889  2839-2839  Capacitor               br.com.poliview.Siecon               V  callback: 128851486, pluginId: CapacitorHttp, methodName: request, methodData: {"url":"http:\/\/localhost\/svg\/funnel.svg","method":"GET","dataType":"json","headers":{}}
2023-09-21 15:50:58.897  2839-3106  Capacitor               br.com.poliview.Siecon               D  Handling local request: http://localhost/node_modules_ionic_core_dist_esm_ion-back-button_entry_js.js
2023-09-21 15:50:58.900  2839-3876  CapacitorCookies        br.com.poliview.Siecon               I  Getting cookies at: 'http://localhost/svg/funnel.svg'
2023-09-21 15:50:58.907  2839-3876  TrafficStats            br.com.poliview.Siecon               D  tagSocket(5) with statsTag=0xffffffff, statsUid=-1
2023-09-21 15:50:58.909  2839-3107  Capacitor               br.com.poliview.Siecon               D  Handling local request: http://localhost/assets/icon/favicon.png
2023-09-21 15:50:58.910  2839-3876  Capacitor/Plugin        br.com.poliview.Siecon               E  Failed to connect to localhost/127.0.0.1:80
                                                                                                    java.net.ConnectException: Failed to connect to localhost/127.0.0.1:80
                                                                                                    	at com.android.okhttp.internal.io.RealConnection.connectSocket(RealConnection.java:147)
                                                                                                    	at com.android.okhttp.internal.io.RealConnection.connect(RealConnection.java:116)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.findConnection(StreamAllocation.java:186)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.findHealthyConnection(StreamAllocation.java:128)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.newStream(StreamAllocation.java:97)
                                                                                                    	at com.android.okhttp.internal.http.HttpEngine.connect(HttpEngine.java:289)
                                                                                                    	at com.android.okhttp.internal.http.HttpEngine.sendRequest(HttpEngine.java:232)
                                                                                                    	at com.android.okhttp.internal.huc.HttpURLConnectionImpl.execute(HttpURLConnectionImpl.java:465)
                                                                                                    	at com.android.okhttp.internal.huc.HttpURLConnectionImpl.connect(HttpURLConnectionImpl.java:131)
                                                                                                    	at com.getcapacitor.plugin.util.CapacitorHttpUrlConnection.connect(CapacitorHttpUrlConnection.java:300)
                                                                                                    	at com.getcapacitor.plugin.util.HttpRequestHandler.request(HttpRequestHandler.java:419)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp.lambda$http$0(CapacitorHttp.java:64)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp.$r8$lambda$nEWv6LUu-usVqu2PfWDWH0J-AgQ(Unknown Source:0)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp$$ExternalSyntheticLambda0.run(Unknown Source:6)
                                                                                                    	at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:487)
                                                                                                    	at java.util.concurrent.FutureTask.run(FutureTask.java:264)
                                                                                                    	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
                                                                                                    	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:644)
                                                                                                    	at java.lang.Thread.run(Thread.java:1012)
2023-09-21 15:50:58.911  2839-3876  Capacitor               br.com.poliview.Siecon               D  Sending plugin error: {"save":false,"callbackId":"128851486","pluginId":"CapacitorHttp","methodName":"request","success":false,"error":{"message":"Failed to connect to localhost\/127.0.0.1:80","code":"ConnectException"}}
2023-09-21 15:50:58.925  2839-2839  Capacitor/Console       br.com.poliview.Siecon               D  File: http://localhost/ - Line 480 - Msg: CapacitorHttp fetch 1695322258878 /svg/funnel.svg: 40.880126953125 ms
2023-09-21 15:50:58.926  2839-2839  Capacitor/Console       br.com.poliview.Siecon               E  File: http://localhost/polyfills.js - Line 1197 - Msg: Unhandled Promise rejection: Failed to connect to localhost/127.0.0.1:80 ; Zone: <root> ; Task: null ; Value: Error: Failed to connect to localhost/127.0.0.1:80 Error: Failed to connect to localhost/127.0.0.1:80
                                                                                                        at returnResult (http://localhost/:868:32)
                                                                                                        at win.androidBridge.onmessage (http://localhost/:843:21)
2023-09-21 15:50:58.926  2839-2839  Capacitor/Console       br.com.poliview.Siecon               E  File: http://localhost/polyfills.js - Line 1197 - Msg: Unhandled Promise rejection: Failed to connect to localhost/127.0.0.1:80 ; Zone: <root> ; Task: Promise.then ; Value: Error: Failed to connect to localhost/127.0.0.1:80 Error: Failed to connect to localhost/127.0.0.1:80
                                                                                                        at returnResult (http://localhost/:868:32)
                                                                                                        at win.androidBridge.onmessage (http://localhost/:843:21)
2023-09-21 15:50:58.926  2839-2839  Capacitor/Console       br.com.poliview.Siecon               E  File: http://localhost/polyfills.js - Line 1197 - Msg: Unhandled Promise rejection: Failed to connect to localhost/127.0.0.1:80 ; Zone: <root> ; Task: Promise.then ; Value: Error: Failed to connect to localhost/127.0.0.1:80 Error: Failed to connect to localhost/127.0.0.1:80
                                                                                                        at returnResult (http://localhost/:868:32)
                                                                                                        at win.androidBridge.onmessage (http://localhost/:843:21)
2023-09-21 15:50:58.933  2839-2979  EGL_emulation           br.com.poliview.Siecon               D  app_time_stats: avg=14509.76ms min=83.47ms max=28936.05ms count=2
2023-09-21 15:50:58.971  2839-2839  Capacitor/Plugin        br.com.poliview.Siecon               V  To native (Capacitor plugin): callbackId: 128851487, pluginId: CapacitorHttp, methodName: request
2023-09-21 15:50:58.971  2839-2839  Capacitor               br.com.poliview.Siecon               V  callback: 128851487, pluginId: CapacitorHttp, methodName: request, methodData: {"url":"http:\/\/localhost\/svg\/checkbox.svg","method":"GET","dataType":"json","headers":{}}
2023-09-21 15:50:58.973  2839-3876  CapacitorCookies        br.com.poliview.Siecon               I  Getting cookies at: 'http://localhost/svg/checkbox.svg'
2023-09-21 15:50:58.974  2839-3876  TrafficStats            br.com.poliview.Siecon               D  tagSocket(5) with statsTag=0xffffffff, statsUid=-1
2023-09-21 15:50:58.976  2839-3876  Capacitor/Plugin        br.com.poliview.Siecon               E  Failed to connect to localhost/127.0.0.1:80
                                                                                                    java.net.ConnectException: Failed to connect to localhost/127.0.0.1:80
                                                                                                    	at com.android.okhttp.internal.io.RealConnection.connectSocket(RealConnection.java:147)
                                                                                                    	at com.android.okhttp.internal.io.RealConnection.connect(RealConnection.java:116)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.findConnection(StreamAllocation.java:186)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.findHealthyConnection(StreamAllocation.java:128)
                                                                                                    	at com.android.okhttp.internal.http.StreamAllocation.newStream(StreamAllocation.java:97)
                                                                                                    	at com.android.okhttp.internal.http.HttpEngine.connect(HttpEngine.java:289)
                                                                                                    	at com.android.okhttp.internal.http.HttpEngine.sendRequest(HttpEngine.java:232)
                                                                                                    	at com.android.okhttp.internal.huc.HttpURLConnectionImpl.execute(HttpURLConnectionImpl.java:465)
                                                                                                    	at com.android.okhttp.internal.huc.HttpURLConnectionImpl.connect(HttpURLConnectionImpl.java:131)
                                                                                                    	at com.getcapacitor.plugin.util.CapacitorHttpUrlConnection.connect(CapacitorHttpUrlConnection.java:300)
                                                                                                    	at com.getcapacitor.plugin.util.HttpRequestHandler.request(HttpRequestHandler.java:419)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp.lambda$http$0(CapacitorHttp.java:64)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp.$r8$lambda$nEWv6LUu-usVqu2PfWDWH0J-AgQ(Unknown Source:0)
                                                                                                    	at com.getcapacitor.plugin.CapacitorHttp$$ExternalSyntheticLambda0.run(Unknown Source:6)
                                                                                                    	at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:487)
                                                                                                    	at java.util.concurrent.FutureTask.run(FutureTask.java:264)
                                                                                                    	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
                                                                                                    	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:644)
                                                                                                    	at java.lang.Thread.run(Thread.java:1012)
2023-09-21 15:50:58.976  2839-3876  Capacitor               br.com.poliview.Siecon               D  Sending plugin error: {"save":false,"callbackId":"128851487","pluginId":"CapacitorHttp","methodName":"request","success":false,"error":{"message":"Failed to connect to localhost\/127.0.0.1:80","code":"ConnectException"}}
2023-09-21 15:50:58.990  2839-2839  Capacitor/Console       br.com.poliview.Siecon               D  File: http://localhost/ - Line 480 - Msg: CapacitorHttp fetch 1695322258968 /svg/checkbox.svg: 19.38916015625 ms
2023-09-21 15:50:58.990  2839-2839  Capacitor/Console       br.com.poliview.Siecon               E  File: http://localhost/polyfills.js - Line 1197 - Msg: Unhandled Promise rejection: Failed to connect to localhost/127.0.0.1:80 ; Zone: <root> ; Task: null ; Value: Error: Failed to connect to localhost/127.0.0.1:80 Error: Failed to connect to localhost/127.0.0.1:80
                                                                                                        at returnResult (http://localhost/:868:32)
                                                                                                        at win.androidBridge.onmessage (http://localhost/:843:21)
2023-09-21 15:50:58.990  2839-2839  Capacitor/Console       br.com.poliview.Siecon               E  File: http://localhost/polyfills.js - Line 1197 - Msg: Unhandled Promise rejection: Failed to connect to localhost/127.0.0.1:80 ; Zone: <root> ; Task: Promise.then ; Value: Error: Failed to connect to localhost/127.0.0.1:80 Error: Failed to connect to localhost/127.0.0.1:80
                                                                                                        at returnResult (http://localhost/:868:32)
                                                                                                        at win.androidBridge.onmessage (http://localhost/:843:21)

The unified diff with the packages that i’ve updated

-    "@angular-devkit/build-angular": "^16.2.1",
-    "@angular/common": "^16.2.3",
-    "@angular/core": "^16.2.3",
-    "@angular/forms": "^16.2.3",
-    "@angular/platform-browser": "^16.2.3",
-    "@angular/platform-browser-dynamic": "^16.2.3",
-    "@angular/router": "^16.2.3",
+    "@angular-devkit/build-angular": "^16.2.3",
+    "@angular/common": "^16.2.5",
+    "@angular/core": "^16.2.5",
+    "@angular/forms": "^16.2.5",
+    "@angular/platform-browser": "^16.2.5",
+    "@angular/platform-browser-dynamic": "^16.2.5",
+    "@angular/router": "^16.2.5",
     "@awesome-cordova-plugins/core": "6.4.0",
-    "@awesome-cordova-plugins/file": "6.4.0",
     "@awesome-cordova-plugins/file-opener": "6.4.0",
-    "@awesome-cordova-plugins/onesignal": "6.4.0",
-    "@capacitor/android": "5.3.0",
+    "@capacitor/android": "5.4.0",
     "@capacitor/app": "^5.0.0",
-    "@capacitor/core": "^5.0.0",
-    "@capacitor/filesystem": "^5.1.3",
+    "@capacitor/core": "5.4.0",
+    "@capacitor/filesystem": "5.1.4",
     "@capacitor/haptics": "^5.0.0",
-    "@capacitor/ios": "5.3.0",
+    "@capacitor/ios": "5.4.0",
     "@capacitor/keyboard": "^5.0.0",
     "@capacitor/preferences": "^5.0.0",
-    "@ionic/angular": "7.3.2",
-    "@ionic/core": "7.3.2",
+    "@ionic/angular": "7.4.0",
+    "@ionic/core": "7.4.0",
     "@ionic/storage": "4.0.0",
     "@ionic/storage-angular": "4.0.0",
     "cordova-plugin-file-opener2": "4.0.0",
@@ -45,11 +43,11 @@
     "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular/cli": "16.2.1",
-    "@angular/compiler": "^16.2.3",
-    "@angular/compiler-cli": "^16.2.3",
-    "@angular/language-service": "^16.2.3",
-    "@capacitor/cli": "^5.0.0",
+    "@angular/cli": "16.2.3",
+    "@angular/compiler": "^16.2.5",
+    "@angular/compiler-cli": "^16.2.5",
+    "@angular/language-service": "^16.2.5",
+    "@capacitor/cli": "5.4.0",
     "@ionic/angular-toolkit": "10.0.0",
     "@types/jasmine": "4.3.5",
     "@types/jasminewd2": "2.0.10",

Thanks in advance!

Hi, this is a Bug in Version 5.4.0. You should temporarily downgrade to 5.3.0 to fix that problem.

1 Like

Version 5.4.2 was released which fixes this issue:

1 Like

Thank you! It worked!