FileReader 不是使用 Angular Server Side Rendering 定义的

Question

我正在一个大型Web应用程序中设置服务器端渲染。它适用于没有文件阅读器实例的页面。您知道如何使文件读取器与 SSR 兼容启用吗？

我找到了一个用于文件阅读器的 NPM 包。我在server.ts中安装并导入它，从"文件阅读器"导入*作为文件阅读器;但我没有得到任何结果。

我还在webpack.server.config.ts的白名单中添加了文件阅读器包，但再次没有运气。

我试图用新的 Response(blob(.text(( 替换 FileReader;但在这种情况下，响应也是未定义的。

我也试过窗户。FileReader(( 和全局。FileReader(( 和没有运气了。

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

这是错误消息

我得到： 错误 { 错误：

未捕获 (在承诺中(： 参考错误： 未定义文件读取器 引用错误：未定义文件读取器 在Observable._subscribe....

Answer 1

FileReader是一个 Web API;请改用 Node 的对象fs请参阅文档。

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

你需要安装 "@types/node">

通过此命令

npm install --save @types/node

然后在你的 tsconfig.json 中添加

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

如果不起作用，请打开您的 tsconfig.app.json 文件添加到类型部分

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

Answer 4

也许这个答案来得太晚了，但如果其他人遇到这个问题，这个解决方案在使用Angular 9时对我有用。所以基本上你需要创建一个代码块，只有当你的应用程序在浏览器上而不是在服务器端时，它才会被执行：

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