Translation custom loader CORS issue when reading from data directory

Ionic Framework
1

I have created a custom loader for ngx-translate within an Ionic (v4) app. I have done this because I want to download the latest translation files from a server and then save into the data directory so they are accessible when the app is offline.

I have succeeded with this part. However, I am now experiencing issues with CORS within my getTranslation function.

How can I get around this issue?

getTranslation(lang: string): Observable<any> {
    const subDirectory = 'i18n';
    const fileName = lang;
    const fileExtension = '.json';
    let rootDirectory = '';
    let rootDirectoryPath = '';
    let directory = '';
    let directoryPath = '';
    if (this.platform.is('cordova')) {
      this.platform.ready()
        .then(() => {
          rootDirectory = this.file.dataDirectory;
          rootDirectoryPath = rootDirectory;
          directory = rootDirectoryPath + subDirectory;
          directoryPath = directory + '/';
          console.log(directoryPath + fileName + fileExtension + ':');
          this.http
            .get(directoryPath + fileName + fileExtension)
            .pipe(map((res: any) => res))
            .subscribe(translationData => {
              console.log(translationData);
            });
          const translation = this.http.get(directoryPath + fileName + fileExtension);
          return translation;
        });
    } else {
      rootDirectory = '/assets/data';
      rootDirectoryPath = rootDirectory + '/';
      directory = rootDirectoryPath + subDirectory;
      directoryPath = directory + '/';
      const translation = this.http.get(directoryPath + fileName + fileExtension);
      return translation;
    }
  }
2

I made some more progress on this. I have changed the function to:

getTranslation(lang: string): Observable<any> {
  const subDirectory = 'i18n';
  const fileName = lang;
  const fileExtension = '.json';
  let rootDirectory = '';
  let rootDirectoryPath = '';
  let directory = '';
  let directoryPath = '';
  if (this.platform.is('cordova')) {
    this.platform.ready()
      .then(() => {
        rootDirectory = this.file.dataDirectory;
        rootDirectoryPath = rootDirectory;
        directory = rootDirectoryPath + subDirectory;
        directoryPath = directory + '/';
        console.log(directoryPath + fileName + fileExtension + ':');
        const translationFilePath = this.webview.convertFileSrc(directoryPath + fileName + fileExtension);
        // return this.http.get(translationFilePath);
        return this.http.get(translationFilePath)
          .pipe(map((res: JSON) => {
            return res;
          }));
      });
  } else {
    rootDirectory = '/assets/data';
    rootDirectoryPath = rootDirectory + '/';
    directory = rootDirectoryPath + subDirectory;
    directoryPath = directory + '/';
    console.log(directoryPath + fileName + fileExtension + ':');
    return this.http.get(directoryPath + fileName + fileExtension);
  }
}

So now I have resolved the CORS issue by using WebView to convert the file source.

Now the only issue I have is that the Observable returned is obviously not understood by ngx-translate. So I have created a StackOverflow post.

3

I have no idea, but have you checked that res is actually in json format? Maybe you need to use parse? JSON.parse(res)?