Angular获取特定文件夹中的所有文件名答案

【问题标题】：Angular get all filenames inside a specifc folderAngular获取特定文件夹中的所有文件名
【发布时间】：2020-06-28 18:54:15
【问题描述】：

在我的 Angular 应用程序中，我想列出资产文件夹中的所有文件名。

所以我想使用这个 npm 库：list-files-in-dir

https://www.npmjs.com/package/list-files-in-dir

所以我在我的 Angular 应用程序中提供了这项服务：

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import {listFiles} from 'list-files-in-dir';
    @Injectable()
    export class ConfigService {
      files: any;
      constructor(private http: HttpClient) { }
    
      getFilesFromFolder(){
        listFiles('assets/')
        .then(files => {
            // do what ever you want with the file paths
            this.files = files
            console.log(this.files)
        }
       }
     }

但是当调用它时我得到这个错误：

错误错误：未捕获（承诺）：错误：错误：ENOENT：没有这样的文件或目录。, '/assets' 错误

我为此做了一个stackblitz sn-p：

https://stackblitz.com/edit/angular-read-jsonfile-data

建议？

【问题讨论】：

您希望能够从您的 Angular 应用程序中读取什么文件系统？我假设这是在浏览器中运行的普通 Angular 应用程序？
在浏览器中运行时无法访问文件系统。
任何简单的替代方案？

标签： javascript node.js angular typescript

【解决方案1】：

你不能直接在 Angular 中访问文件系统，因为有一天你可能会部署你的代码，然后代码在浏览器中运行。

如果您结合electron创建桌面应用程序，那么您可以通过node.js filesystem api访问桌面文件系统。

Angular 有 environments 的概念来存储配置，您可以在其中区分 prod 和 dev 之间的配置，看看 Angular build guide docs。

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url'
};

对于纯配置设置，我建议创建纯 ConfigService 并将数据保存为 const 在那里。

如果您更喜欢从 json 文件加载数据，您可以关注 this thread 在 Angular 2 中加载配置 JSON 文件。

【讨论】：

【解决方案2】：

你不能那样做。你应该

1) 添加返回文件列表的服务器 API。

2) 或者你可以编写一个脚本来生成文件列表到一个json文件，并通过角度动态加载

【讨论】：