Ionic native file plugin: file.readAsArrayBuffer() => Uncaught RangeError: Array buffer allocation failed

Question

I doing a intership project in Ionic. In this project, I have to read mbtiles files (via the @ionic-native/file plugin) and put them in leaflet (via the leaflet-tilelayer-mbtiles-tsplugin for leaflet). i do it like this:

this.file.readAsArrayBuffer(PATH, MBITILEFILENAME).then(res =>{
                L.tileLayer.mbTiles(res,{
                    maxZoom: 18,
                    attribution: "mbtiles"
                }).addTo(this.map)
            })

As I don't use the Ionic test app for some reasons, I have to test my app directly on the phone, and use Android studio console to see what's going on.

Here's the problem:
When I use a little mbtiles file (10Mo, testing file) it work, but when I use a bigger file (880Mo, file it has to read in prod environment) Android Console read me this:

I/chromium: [INFO:CONSOLE(312)] "Uncaught RangeError: Array buffer allocation failed", source: http://localhost/cordova.js (312)

I tried to search for the file.readAsArrayBuffer() size limit, but I found nothing.

Can you tell me what is thefile.readAsArrayBuffer() size limit? Any solution to bypass this limit with Ionic? Or something that can solve my problem?

Answer 1

I found how to do it, and forgot to post the answer. I used WebView from "@ionic-native/ionic-webview" so the map is do not need to be fully loaded, just the part needed.

var pathToFile =
    this.file.externalDataDirectory + PATHTOFILE
var truePath = WebView.convertFileSrc(pathToFile);
L.tileLayer(truePath + "/{z}/{x}/{y}.png", {
    maxZoom: 18,
    attribution: "local"
}).addTo(this.map);