从 Angular/Nativescript 读取本地 JSON 文件

Question

我试过在以下位置放置一个 en.json 文件：

src/assets/i18n/en.json
src/app/assets/i18n/en.json

然后我尝试像这样读取文件：

import {knownFolders, File} from 'tns-core-modules/file-system';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { Observable } from 'rxjs';

export class TranslateFileLoader implements TranslateLoader {
    constructor(public prefix: string = 'assets/i18n/', public suffix: string = '.json') {}

    public getTranslation(lang: string): Observable<Object> {
      const appFolder = knownFolders.currentApp(); // Havet tried with knownFolders.documents() also
      console.log(`${this.prefix}${lang}${this.suffix}`);
      const cfgFile = appFolder.getFile(`${this.prefix}${lang}${this.suffix}`);
      console.log(File.exists(cfgFile.path));
      console.log(cfgFile.path);
      const fileData = cfgFile.readTextSync();
      console.log(fileData);
      return JSON.parse(fileData);
    }
}

console.log #1: assets/i18n/en.json
console.log #2: true
console.log #3: /data/data/org.nativescript.playground/files/app/assets/i18n/en.json
console.log #4:

所以是的，路径看起来不错，File.exists(cfgFile.path) returns true，但是 fileData 是空的，因此当我 JSON.parse(fileData).但为什么？首先我以为文件不在那里，但我从我的存在测试中得到了真实的结果。因此，当 device/emulator 为运行时，文件似乎就在那里，但我无法读取其内容？

有什么想法吗？

谢谢
索伦

Answer 1

请分享 playground 示例，这样可以很容易地确定问题出在哪里。您甚至可以简单地将 JSON 导入为。

例如，en.ts

export const languageJSON = {
   ....
};

导入为

const languageJSON = require(`${this.prefix}${lang}${this.suffix}`).languageJSON;

由于路径是动态的，只需确保您的 webpack 构建能够理解它。

Answer 2

想想你的环境运行你的 JS 代码。

如果您运行在 node.js 下，您的代码是有意义的，它会起作用。

如果您运行在浏览器中，出于安全原因，本地文件系统无法访问。但是，您应该能够从服务器获取文件，并且您也许能够从本地沙箱写入和读取。

但是有这个API，看看它是否适合你：https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API

在我的项目中，我经常将本地化存储在 json 文件中，并且我成功地使用 :

获取了它们

  import { HttpClient } from '@angular/common/http';
  ..
  constructor(private http: HttpClient) {} 
  ..
  this.http.get(this.urlToFile, { responseType: 'wherever you need here text|json'}).map(res => {...});

Answer 3

我修好了！ HttpClient 不适用于本机（是的，我的问题是本机设备上的 Nativescript，那里没有为文件提供服务的 http 服务器，是的，我确实可以访问本地存储）。我的代码有效，但 *.json 文件未传输到构建包。我必须在 "CopyWebpackPlugin" 的 tns 部分的 mt webpack.config.js 中添加那些，然后一切正常:) 我无法插入 "File.exists"，因为我对“.getFile”的调用创建了一个空的文件.

从 Angular/Nativescript 读取本地 JSON 文件

Reading a local JSON file from Angular/Nativescript

nativescript

angular2-nativescript

angular