FileReader 未使用 Angular 服务器端渲染定义

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....

Answer 1

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

Answer 2

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

Answer 3

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"
  ]
}

Answer 4

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

}