Angular get all filenames inside a specifc folder

Question

Inside my Angular app i i want to liste all files names inside assets folder.

So that i want to use this npm library : list-files-in-dir

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

Sso i ve this service inside my angular app :

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

but when calling it i get this error :

ERROR Error: Uncaught (in promise): Error: Error: ENOENT: No such file or directory., '/assets' Error

i ve done a stackblitz snippet for this :

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

Suggestions ?

What file system are you expecting to be able to read from your Angular app? I assume this is a normal Angular app running in a browser? — Kurt Hamilton, Mar 17 '20 at 16:45
When running in the browser is not possible to access the file system. — Leonardo Alves, Mar 17 '20 at 16:47

score 1 · Accepted Answer · answered Mar 18 '20 at 08:43

1

You can't do that. You should

1) Add an server API that return file list.

2) Or you can write a script to gen file list to a json file, and dynamic load by angular

answered Mar 18 '20 at 08:43

andyf

3,262
3
23
37

score 0 · Answer 2 · answered Mar 18 '20 at 08:38

You can not access the filesystem in angular directly because some day you might deploy your code and then the code runs in a browser.

If you create a desktop application in combination with electron then you can access the desktop file system via node.js filesystem api.

Angular has the concept of environments to store configs where you can differ configs between prod and dev, have a look at the Angular build guide docs.

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

For only plain config settings i recommend to create a plain ConfigService and just hold the data as const in there.

If you prefer to load the data from json files you can follow this thread for Load Config JSON File In Angular 2.

Angular get all filenames inside a specifc folder

2 Answers2