FileReader is not defined with Angular Server Side Rendering

Question

I'm setting Server Side Rendering in a large webapp. It works well for page without FileReader instance. Do you know how can I make FileReader to work with SSR enable?

I found an NPM package for filereader. I installed and import it in server.ts import * as FileReader from 'filereader'; but I got no result from that.

I also added the filereader package in the whitelist of webpack.server.config.ts with no luck again.

I tried to replace FileReader with new Response(blob).text(); but in that case it is the Response which is undefined too.

I also tried window.FileReader() and global.FileReader() and no luck again.

This is the method with FileReader:

function blobToText(blob: any): Observable<string> {
  return new Observable<string>((observer: any) => {
        if (!blob) {
            observer.next("");
            observer.complete();
        } else {
          let reader = new FileReader(); // FileReader is not defined
            reader.onload = event => { 
                observer.next((<any>event.target).result);
                observer.complete();
            };
            reader.readAsText(blob); 
        }
    });
}

Here is the error message

I got: ERROR { Error: Uncaught (in promise): ReferenceError: FileReader is not defined ReferenceError: FileReader is not defined at Observable._subscribe....

Some of the discussion here may be useful. github.com/RicoSuter/NSwag/issues/1692 — Simon_Weaver
– Simon_Weaver, Commented Jun 15, 2021 at 9:27

guest · Accepted Answer · 2019-08-09 23:42:06Z

3

FileReader is a Web API; use fs object of Node instead, see docs.

answered Aug 9, 2019 at 23:42

guest

311 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Samantha Létourneau Over a year ago

how? Would you give me the line that explain it?

Samantha Létourneau Over a year ago

Impossible to use fs, I always got "Module not found: Error: Can't resolve 'fs' in."

Samantha Létourneau Over a year ago

Can you give me a step by step or even a working example on github please?

Zoe - Save the data dump · Accepted Answer · 2020-07-08 15:59:32Z

function blobToText(blob: any): Observable<string> {
    return new Observable<string>((observer: any) => {
        if (!blob) {
            observer.next("");
            observer.complete();
        } else {
            if (typeof window === 'undefined') {
                observer.next(blob);
                observer.complete();
            } else {
                let reader = new FileReader();
                reader.onload = event => {
                    observer.next((<any>event.target).result);
                    observer.complete();
                };
                reader.readAsText(blob);
            }
        }
    });
}

Tony · Accepted Answer · 2019-08-10 10:32:15Z

0

You need to install "@types/node"

By this command

npm install --save @types/node

Then in your tsconfig.json add

"typeRoots": [
  "node_modules/@types"
]

If not work open your tsconfig.app.json file add to types section

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "esNext",
    "types": ["node"] // add node here
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

answered Aug 10, 2019 at 10:32

Tony

20.3k7 gold badges42 silver badges62 bronze badges

1 Comment

Samantha Létourneau Over a year ago

It didn't solve the problem. FileReader always undefined. Futhermore, I added use import { readFileSync } from 'fs'; with observer.next(readFileSync(blob).toString); observer.complete(); and I got **"Module not found: Error: Can't resolve 'fs' in..." **

vhbazan · Accepted Answer · 2020-05-31 15:51:55Z

Maybe this answer comes too late but in case anybody else could run into this issue, this solution worked for me, when using Angular 9. So basically you need to create a block of code that only gets executed when your application is on the browser not in the server side:

//Import PLATFORM_ID and Inject from @angular/core
import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';

@Component({
  selector: 'app-new-post',
  templateUrl: './new-post.component.html',
  styleUrls: ['./new-post.component.scss']
})
export class NewPostComponent implements OnInit {

//Change the FileReader variable
reader; //before it was: reader: FileReader = new FileReader(); 

//Inject PLATFORM_ID as follow: 
    constructor(  @Inject(PLATFORM_ID) private platformId: any,
                  private readonly activatedRoute: ActivatedRoute,
                  private readonly fileUploadService: FileUploadService) {
    }

     ngOnInit() {
     //Create a code block that only gets executed when it's loaded in the browser: 
        if (isPlatformBrowser(this.platformId)) {
          this.reader = new FileReader();
     }

}

Collectives™ on Stack Overflow

FileReader is not defined with Angular Server Side Rendering

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Related