How to save in local the translation file (after download) in Ionic? - ionic-framework

Question

I need to download the translation file from a remote server and to save it in local to not download this one each time the app is reloading.
The file is downloaded but i can't save it.
import { Storage } from '#ionic/storage';
...
constructor(
private http: HttpClient,
private storage: Storage
) {
}
getTranslation(lang: string): Observable<any> {
return new Observable((observer) => {
this.http.post(SERVER_BASE_URL, null, {headers: this.contentHeader}).subscribe((res: Response) => {
console.log('get translation from server');
console.log(res);
this.storage.set("test", res).then(response => {
console.log("save translation");
}).catch(error => {
console.log("error");
console.log(error);
})
observer.next(res);
observer.complete();
},
error => {
console.log('get translation from local');
// failed to retrieve from api, switch to local
this.http.get('/assets/i18n/' + lang + '.json').subscribe((res: Response) => {
observer.next(res);
observer.complete();
});
});
});
}
I have tried to use Storage but, i have the error
"Cannot read property 'set' of undefined"
I have use the storage in other part of my app and it's work. So I don't understand why in the translationService it's not working.
Thanks for your help.

Answer 1

if you want to store object or list then
this.storage.set('test', JSON.stringify(this.res));
while fetch
this.storage.get('test').then(value => {
let res = JSON.parse(value);
}).catch(err=>{
console.log(err)
})
if you want to save the file then
https://stackoverflow.com/a/57497397/7456041

Answer 2

I have try to save the file in local, i have the same error: Cannot read property 'writeFile' of undefined.
this.http.post(apiAddress, body, {headers: this.contentHeader}).subscribe((res: Response) => {
console.log('get translation from server');
console.log(res);
this.file.writeFile(
this.file.dataDirectory,
lang + '.json',
JSON.stringify(res),
{replace: true}).then(_ => {
console.log('Directory exists');
}).catch(err => {
console.log('Directory doesn\'t exist');
});
observer.next(res);
observer.complete();
},
error => {
console.log('get translation from local');
// failed to retrieve from api, switch to local
this.http.get('/assets/i18n/' + lang + '.json').subscribe((res: Response) => {
observer.next(res);
observer.complete();
});
});
I found what i have missed. In app.module.ts, i need to add "deps" to use the dependencies...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
// useFactory: (createTranslateLoader),
useClass: TranslationService,
deps: [HttpClient, File]
}
}),
Thanks for your help.