Angular 4.x + Cordova：FileReader 静默失败（白屏死机）

Question

我有一个以前运行良好的 Angular 4.3 + Cordova 应用程序。但是现在，我在应用启动时出现空白屏幕，并且什么也没有发生。

挖掘了一段时间后，我意识到它来自哪里：

我的主页受到CanActivate 保护，如果这是第一次运行或缺少所需的首选项，它将检查一些文件系统持久的首选项并将用户重定向到另一个页面，以填写必需的属性。

所以应用程序的启动取决于我的CanActivate 守卫，而PreferenceService 本身又取决于我自己实现的FileSystemService。问题是，当我尝试读取存储用户首选项的文件时，没有触发任何回调，没有任何反应，甚至没有错误。

这是我的FileSystemService 中没有任何错误的部分：

read(file: FileEntry, mode: "text" | "arrayBuffer" | "binaryString" | "dataURL" = "text"): Observable<ProgressEvent> {
    return this.cdv.ready.flatMap(() => {
        return Observable.create(observer => {
            file.file(file => {
                let reader = new FileReader();
                reader.onerror = (evt: ErrorEvent) => {
                    this.zone.run(() => observer.error(evt)); //never triggered
                };
                reader.onload = (evt: ProgressEvent) => {
                    this.zone.run(() => observer.next(evt)); //never trigerred
                };
                switch (mode) {
                    case "text":
                        reader.readAsText(file);
                        break;
                    case "arrayBuffer":
                        reader.readAsArrayBuffer(file);
                        break;
                    case "binaryString":
                        reader.readAsBinaryString(file);
                        break;
                    case "dataURL":
                        reader.readAsDataURL(file);
                        break;
                }
            });
        });
    });
}

为什么会发生这种情况，我该如何处理才能触发我的回调？

Answer 1

编辑

如前所述，我在 zone.js 存储库上打开了一个问题，zone.js 所有者迅速修补了代码。只需在你的 polyfill 中导入 zone.js/zone-patch-cordova，你就可以避免使用我的肮脏 hack 的痛苦。

原答案

在调试此代码时，我意识到 FileReader 构造函数已被 cordova 和 zone.js 修补。根据我对 zone.js 修补的理解，它会将每个“onProperty”（onload、onloadend、onerror）更改为 addEventListener(...) 对应部分。

模块名称：

on_property

zone.js 的行为：

target.onProp 将成为区域感知 target.addEventListener(prop)

source

但是cordova没有使用dispatchEvent(...) API来通知监听器操作已经结束。

一种解决方案可能是从 zone.js 停用 onProperty 模块，但它可能会破坏 angular 的行为。

这就是我应对这种情况的方式：

read(file: FileEntry, mode: "text" | "arrayBuffer" | "binaryString" | "dataURL" = "text"): Observable<ProgressEvent> {
    return this.cdv.ready.flatMap(() => {
        return Observable.create(observer => {
            file.file(file => {
                let FileReader: new() => FileReader = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate
                let reader = new FileReader();
                reader.onerror = (evt: ErrorEvent) => {
                    this.zone.run(() => observer.error(evt)); //never triggered
                };
                reader.onload = (evt: ProgressEvent) => {
                    this.zone.run(() => observer.next(evt)); //never trigerred
                };
                switch (mode) {
                    case "text":
                        reader.readAsText(file);
                        break;
                    case "arrayBuffer":
                        reader.readAsArrayBuffer(file);
                        break;
                    case "binaryString":
                        reader.readAsBinaryString(file);
                        break;
                    case "dataURL":
                        reader.readAsDataURL(file);
                        break;
                }
            });
        });
    });
}

这里的秘密是 zone.js 将原始构造函数保留在 __zone_symbol__OriginalDelegate 属性中，因此调用它实际上会直接调用 Cordova 的 FileReader无需 zone.js 补丁。

这个解决方案是一个肮脏的黑客，我有openned an issue on zone's repository

编辑：

FileWriter 也有同样的问题（它在内部调用 FileReader）所以我写了这个小垫片：

function noZonePatch(cb: () => void) {
    const orig = FileReader;
    const unpatched = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate;
    (window as any).FileReader = unpatched;
    cb();
    (window as any).FileReader = orig;
}

然后包装我对读/写操作的调用：

write(file: FileEntry, content: Blob) {
    return this.cdv.ready.flatMap(() => {
        return Observable.create((out: Observer<ProgressEvent>) => {
            file.createWriter((writer) => {
                noZonePatch(() => {
                    writer.onwrite = (evt: ProgressEvent) => {
                        this.zone.run(() => {
                            out.next(evt);
                            out.complete();
                        });
                    };
                    writer.onerror = (evt) => {
                        this.zone.run(() => out.error(evt));
                    };
                    writer.write(content); // this is where FileReader is called internally
                })
            }, err => out.error(err));
        });
    });
}

read(file: FileEntry, mode: ReadMode = "text"): Observable<ProgressEvent> {
    return this.cdv.ready.switchMap(() => Observable.create((observer: Observer<ProgressEvent>) => {
        file.file(file => {
            noZonePatch(() => {
                let reader = new FileReader();
                reader.onerror = (evt: ErrorEvent) => {
                    this.zone.run(() => observer.error(evt));
                };
                reader.onload = (evt: ProgressEvent) => {
                    this.zone.run(() => observer.next(evt));
                };
                switch (mode) {
                    case "text":
                        reader.readAsText(file);
                        break;
                    case "arrayBuffer":
                        reader.readAsArrayBuffer(file);
                        break;
                    case "binaryString":
                        reader.readAsBinaryString(file);
                        break;
                    case "dataURL":
                        reader.readAsDataURL(file);
                        break;
                }
            });
        });
    }));
}

Answer 2

聚会迟到了，但我不得不修复一个带有这个确切问题的 Ionic3/Angular4 项目，我发现 the answer from @n00dl3 是正确的但是当@ 987654322@ 实例是在全局服务中创建的。因为有时区域尚未修补 FileReader window 对象，因此找不到 __zone_symbol__OriginalDelegate。

所以我所做的总是得到正确的类是一个返回 FileReader 实例的小工厂函数：

function HackFileReader(): FileReader {
  const preZoneFileReader = ((window as any).FileReader as any).__zone_symbol__OriginalDelegate;
  if (preZoneFileReader) {
    console.log('%cHackFileReader: preZoneFileReader found creating new instance', 'font-size:3em; color: red');
    return new preZoneFileReader();
  } else {
    console.log('%cHackFileReader: NO preZoneFileReader was found, returning regular File Reader', 'font-size:3em; color: red');
    return new FileReader();
  }
}

并使用它：

const reader = HackFileReader();

希望对大家有所帮助

Answer 3

如果您使用的是 ionic/cordova，则不需要 @disante 的 HackFileReader 解决方案（我实际使用过）

您需要做两件事，首先是确保您拥有最新的 zone.js。

npm install --save zone.js@latest

其次，您需要确保您的index.html 添加cordova.js AFTER build/polyfills.js