Read files stored in "src" folder

Ionic Framework
1

I’m writing a form-entry app that needs to work offline, and thus uses reference data files to store information like a list of approved products the user can select from. These lists are just arrays, saved as text files so that we can update them with a simple HTML download and not require an HTML change that forces an app update.

Is there a way I can include these .txt files in a src/app/defaultFiles/ folder, and then read them from within the application itself?

2

I would suggest to put them under “assets” and in order to read them, fetch them using the HttpClientModule (if angular) or fetch (if no fw)

I don’t see a way to modify them, if user need offline data, use the storage

p.s.:

this.httpClient.get('./assets/yourfile.json').subscribe(....

or

 const something = await fetch('./assets/yourfile.json');
3

I intend to copy them from within the app to device storage so that updating them is easier (I already have reading from and writing to external storage working). I just need a way to get some default files included in the app during installation, then sort of “unpack” them to external storage, so that I’m not forcing users to go online to download them before they use the app.

4

see above I have update my answer with pseudo-code, maybe it makes things clearer. I suggest something like how ngx-translate works for example

1 Like
5

Also note my example is with json files but could be other types as you wish, txt etc.

1 Like
6

Using fetch returns a Response object with “body”:“ReadableStream,” and I’m not sure how to work with that.

Even attempting to import HttpClient and add it to the page constructor causes a whitescreen on boot due to a StaticInjectorError.

7

Stupid question, but your AppModule is importing HttpClientModule, right?

1 Like
9

I checked that, found a typo and tried again, but it’s still throwing a StaticInjectorError.

10

Example:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class LanguagesService {

    constructor(private httpClient: HttpClient) {
    }

    loadLanguages(): Observable<{}> {
        return this.httpClient.get('./assets/lang/languages.json');
    }
}