Angular 在数据目录中存储翻译文件后，如何从该目录中加载这些文件？

我正在使用创建一个应用程序，并尝试在没有可用internet连接的情况下使尽可能多的应用程序可脱机工作

因此，在第一次加载应用程序时，我希望它从服务器下载翻译，然后将其存储在数据目录中。然后，在后续加载时，应用程序将与服务器检查是否有新的翻译文件可用，并根据需要下载

一旦保存在数据目录中，我想将ngx translate配置为在调用getTranslation时从数据目录中的那些JSON文件读取

到目前为止，我已经创建了一个自定义加载程序，并将ngx translate配置为使用这个自定义加载程序。我还设法从一个位置获取翻译文件并将其保存到另一个位置。目前，我没有将它们从服务器上拉出来，而是将它们从app www目录移动到data目录，因为我还没有设置服务器环境，所以在此期间尽量尝试“模拟”功能

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);
  }
}

getTranslation（lang:string）：可观察{
const子目录='i18n'；
const fileName=lang；
const fileExtension='.json'；
让rootDirectory=''；
让rootDirectoryPath=''；
让目录=“”；
让directoryPath=''；
如果（此.platform.is（'cordova'））{
this.platform.ready（）
.然后（（）=>{
rootDirectory=this.file.dataDirectory；
rootDirectoryPath=rootDirectory；
directory=rootDirectoryPath+子目录；
directoryPath=directory+'/'；
log（directoryPath+fileName+fileExtension+'：'）；
const translationFilePath=this.webview.convertFileSrc（directoryPath+fileName+fileExtension）；
//返回此.http.get（translationFilePath）；
返回此.http.get（translationFilePath）
.pipe（映射（（res:JSON）=>{
返回res；
}));
});
}否则{
rootDirectory='/assets/data'；
rootDirectoryPath=rootDirectory+'/'；
directory=rootDirectoryPath+子目录；
directoryPath=directory+'/'；
log（directoryPath+fileName+fileExtension+'：'）；
返回此.http.get（directoryPath+fileName+fileExtension）；
}
}

当我在浏览器中运行（cordova不可用）时，此函数工作并从/assets/data返回翻译文件，以便能够翻译

但是，当cordova在应用程序中可用时，我得到一个错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'pipe' of undefined
TypeError: Cannot read property 'pipe' of undefined
    at t.getTranslation (main.db14319ec6098ffa1c27.js:1)
    at t.retrieveTranslations (main.db14319ec6098ffa1c27.js:1)
    at t.use (main.db14319ec6098ffa1c27.js:1)
    at main.db14319ec6098ffa1c27.js:1
    at new t (polyfills.30cd1d148106f6301a8e.js:1)
    at t.changeLanguage (main.db14319ec6098ffa1c27.js:1)
    at n.selectLanguage (19.8a90e2507f2b3a13dd11.js:1)
    at Object.handleEvent (19.8a90e2507f2b3a13dd11.js:1)
    at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
    at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
    at P (polyfills.30cd1d148106f6301a8e.js:1)
    at new t (polyfills.30cd1d148106f6301a8e.js:1)
    at t.changeLanguage (main.db14319ec6098ffa1c27.js:1)
    at n.selectLanguage (19.8a90e2507f2b3a13dd11.js:1)
    at Object.handleEvent (19.8a90e2507f2b3a13dd11.js:1)
    at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
    at Object.handleEvent (main.db14319ec6098ffa1c27.js:1)
    at na (main.db14319ec6098ffa1c27.js:1)
    at main.db14319ec6098ffa1c27.js:1
    at HTMLElement.<anonymous> (main.db14319ec6098ffa1c27.js:1)

错误错误：未捕获（承诺中）：TypeError:无法读取未定义的属性“pipe”
TypeError:无法读取未定义的属性“pipe”
at t.getTranslation（main.db14319ec6098ffa1c27.js:1）
在t.retrieveTranslations（main.db14319ec6098ffa1c27.js:1）
at.use（main.db14319ec6098ffa1c27.js:1）
位于main.db14319ec6098ffa1c27.js:1
在新t（polyfills.30cd1d148106f6301a8e.js:1）
at t.changeLanguage（main.db14319ec6098ffa1c27.js:1）
at n.selectLanguage（19.8a90e2507f2b3a13dd11.js:1）
在Object.handleEvent（19.8a90e2507f2b3a13dd11.js:1）
位于Object.handleEvent（main.db14319ec6098ffa1c27.js:1）
位于Object.handleEvent（main.db14319ec6098ffa1c27.js:1）
在P（polyfills.30cd1d148106f6301a8e.js:1）
在新t（polyfills.30cd1d148106f6301a8e.js:1）
at t.changeLanguage（main.db14319ec6098ffa1c27.js:1）
at n.selectLanguage（19.8a90e2507f2b3a13dd11.js:1）
在Object.handleEvent（19.8a90e2507f2b3a13dd11.js:1）
位于Object.handleEvent（main.db14319ec6098ffa1c27.js:1）
位于Object.handleEvent（main.db14319ec6098ffa1c27.js:1）
在na（main.db14319ec6098ffa1c27.js:1）
位于main.db14319ec6098ffa1c27.js:1
在HTMLElement。（main.db14319ec6098ffa1c27.js:1）

---

如果您对此有任何建议和支持，我们将不胜感激。

您应该尝试不同的方法。。不要从文件中加载，而是从类中加载

使用库：

编辑： 好的，我猜您的错误是因为ionic更改了相对路径以及为图像设置src=”“的方式等

---

我会先尝试从同一个目录加载一个图像，看看它是否有效。。尝试阅读有关ionic应用程序中服务的资产的信息

您应该尝试不同的方法。。不要从文件中加载，而是从类中加载

使用库：

编辑： 好的，我猜您的错误是因为ionic更改了相对路径以及为图像设置src=”“的方式等

---

我会先尝试从同一个目录加载一个图像，看看它是否有效。。尝试阅读有关ionic app中服务的资产的信息

我不确定您是否完全理解这一点。我正在使用ngx翻译/核心。我只是想实现一个自定义加载程序。类似于但是从数据目录中读取。我明白了，让我问一个基本问题，您是否尝试加载一个带有角度的文件？因为这是不可能的。angular在浏览器上运行，而不是在系统级别上，因此它无法加载文件Nodejs可以通过fs来完成。您可以创建一个Web服务来返回这些文件数据。我很高兴更改加载文件的方式（如果给出了一些如何实现的示例），但我不确定这是问题所在。我相当确定它读取文件是正确的，但可能它没有以ngx-translate可以理解的方式返回可观察的。最后我编写了我自己的翻译服务。我不确定你是否完全理解这一点。我正在使用ngx翻译/核心。我只是想实现一个自定义加载程序。类似于但是从数据目录中读取。我明白了，让我问一个基本问题，您是否尝试加载一个带有角度的文件？因为这是不可能的。angular在浏览器上运行，而不是在系统级别，因此它无法加载文件Nodejs可以通过fs来完成。您可以做的是创建一个Web服务来返回这些文件数据。我很高兴更改加载文件的方式（如果给出一些如何实现的示例），但我不是