Ionic WebServer Android Static File Path Error

On iOS It is working fine.

iOS File Path : /Users/vishnu/Library/Developer/CoreSimulator/Devices/394BD2FF-A2EF-4C51-A82A-1C57F6967ECD/data/Containers/Bundle/Application/6AD9DCB6-3A96-44E1-A99D-B4092B472A1A/App.app/public/assets/myApp/2.png

IOS LOG

⚡️  [log] - iOS File Path : /Users/vishnu/Library/Developer/CoreSimulator/Devices/394BD2FF-A2EF-4C51-A82A-1C57F6967ECD/data/Containers/Bundle/Application/6AD9DCB6-3A96-44E1-A99D-B4092B472A1A/App.app/public/assets/myApp/2.png
**⚡️ [log] - path = /**

**⚡️ [log] - Path / | TODO Serve Index.html**

**[DEBUG] Connection sent 122 bytes on socket 8**

**[DEBUG] Did close connection on socket 8**

**[VERBOSE] [::1:3005] ::1:55581 200 "GET /" (724 | 122)**

**[DEBUG] Did open connection on socket 8**

**[DEBUG] Connection received 650 bytes on socket 8**

**[DEBUG] Connection on socket 8 preflighting request "GET /favicon.ico" with 650 bytes body**

**[DEBUG] Connection on socket 8 processing request "GET /favicon.ico" with 650 bytes body**

**To Native Cordova -> Webserver sendResponse Webserver533376988 ["options": [EEB26703-18B8-49CC-858A-CA397C72414F, {**

**headers = {**

**};**

**path = "android_asset/public/assets/myApp/2.png";**

**status = 200;**

**}]]**

Android shows error

“android_asset/public/assets/myApp/2.png: open failed: ENOENT (No such file or directory)”

Android File Path : /android_asset/public/assets/myApp/2.png

2022-01-19 16:35:24.891 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 140 - Msg: Android File Path : /android_asset/public/assets/myApp/2.png
2022-01-19 16:35:30.454 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: New request is incoming!
2022-01-19 16:35:30.461 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 122 - Msg:  path = /
2022-01-19 16:35:30.461 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 124 - Msg: Path / | TODO Serve Index.html
2022-01-19 16:35:30.462 28342-28432/io.ionic.starter D/org.apache.cordova.plugin.Webserver: Got sendResponse: ["c07e575c-ea03-431e-b685-2988c84205cf",{"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}]
2022-01-19 16:35:30.493 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: responseObject: {"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}
2022-01-19 16:35:30.637 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: New request is incoming!
2022-01-19 16:35:30.639 28342-28342/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 122 - Msg:  path = /favicon.ico
2022-01-19 16:35:30.639 28342-28432/io.ionic.starter D/org.apache.cordova.plugin.Webserver: Got sendResponse: ["2ac8f737-d914-450f-9598-a4b51253af5e",{"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}]
2022-01-19 16:35:30.675 28342-28479/io.ionic.starter D/org.apache.cordova.plugin.NanoHTTPDWebserver: responseObject: {"status":200,"path":"android_asset\/public\/assets\/myApp\/2.png","headers":{}}

Here is my code

import { Component } from '@angular/core';
import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private webServer: WebServer,private file: File, private platform: Platform) { 

  var port = 3005;
  
  var myRoot;

  if(platform.is("android")){myRoot=this.file.applicationDirectory+"public/assets/myApp/2.png";}
  
  
  if(platform.is("ios")){ myRoot=file.applicationDirectory+"public/assets/myApp/2.png"; }
  
  var myRootPath = myRoot.substring(7, myRoot.length)

  this.webServer.onRequest().subscribe(data => {
    console.log(" path = " + data.path);
    if(data.path === "/"){
      console.log("Path / | TODO Serve Index.html")
    }
    const res: any = {
      status: 200,
      path: "android_asset/public/assets/myApp/2.png", //Testing Static Flile Serving
      headers: {
         
      }
    };

    this.webServer.sendResponse(data.requestId,res)
      .catch((error: any) => console.error(error));
  });

 
  this.webServer.start(port)
  .catch((error: any) => console.error(error));

  console.log('server started at port : ', port);
 

  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {

  if(platform.is("android")){  
    console.log("Android File Path : " + myRootPath)
  }
  if(platform.is("ios")){  
    console.log("iOS File Path : " + myRootPath)
 }
}
}
}

How to fix this issue?

Added

  this.file.checkDir(this.file.applicationDirectory, 'public/assets/myApp').then(_ => console.log('Directory exists')).catch(err =>
    console.log('Directory doesn exist'));

  this.file.checkFile(this.file.applicationDirectory+'public/assets/myApp/', '2.png').then(_ => console.log('File exists')).catch(err =>
      console.log('File doesn exist'));

– log

2022-01-19 20:32:56.541 9831-9831/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 137 - Msg: Directory exists
2022-01-19 20:32:56.542 9831-9831/io.ionic.starter I/Capacitor/Console: File: http://localhost/src_app_home_home_module_ts.js - Line 138 - Msg: File exist

still showing

android_asset/public/assets/myApp/2.png: open failed: ENOENT (No such file or directory)

why is that?

Because assets aren’t real folders in a filesystem. They’re figments that the webview knows how to grab out the place they’re baked into your app binary.

1 Like

Oh, so we need to move or copy our data to dataDirectory right?

I have not found this issue on iOS. So this is only applicable for Android?

Thanks a lot for the clarification.

I copy dir from this.file.applicationDirectory to this.file.dataDirectory. now everything working fine.