Display CSV Data with Angular

Question

I am Trying to display the content of a CSV File in Angular.

To Test if it can read the .csv it I wrote following Method:

public readCsv(){
    this.httpClient.get('/testdata/csv/test.csv', {responseType: 'text'})
    .subscribe(
        data => {
            console.log(data);
        },
        error => {
            console.log(error);
        }
    );
  }

However if I run the Application I get following error:

Http failure response for http://localhost:4200/testdata/csv/test.csv: 404 Not Found

The .csv is in this folder: src > app > testdata > csv > test.csv

The api.service.ts in which I the Method is written here: src > app > api.service.ts

I am running the Method in the testdata.component.ts which lays here: src > api > testdata > testdata.component.ts

with following code:

  ngOnInit() {
   this.apiService.readCsv();
  }

What am I doing wrong? Why do I get a 404 Not Found Error? How could I correctly read the file and even display it?

Mime type error perhaps? An alternative could be to have an actual endpoint that reads and returns the contents of the file. — Steve, Aug 29 '19 at 09:01

score 3 · Accepted Answer · answered Aug 29 '19 at 09:14

Files outside of "assets" folder are not available by default. Save your file inside your project's "assets" folder and access it like this:

this.httpClient.get('assets/test.csv', {responseType: 'text'}).....

Otherwise you would have to make your folder available in the '"assets":' section of your angular.json file.

score 1 · Answer 2 · answered Aug 29 '19 at 09:32

This has to do with what happens when you run ng serve. Your implementation its build over the assumption that ng serve will start a Web Server in your src/app directory and that is not what actually happens. What is happening (as described in this question) is that ng serve compiles your app and starts a local server using webpack-dev-server.

By default the only directory included in the build to deploy is the assets directory under src/assets. You can change that in the assets section of your project in the angular.json file.

{
 ...
 "project": {
   "<project-name>": {
         "architect": {
              "build": {
                "assets": [<list of paths>]
                 ...

See this stackblitz example.

Display CSV Data with Angular

2 Answers2