使用 Apache thrift 在 Nativescript + Angular 中“无法读取未定义的 属性 'browser'”

Question

我正在尝试将 Apache Thrift 与我的 Angular & Nativescript 项目一起使用，但是通过 'tns preview --bundle' 或任何其他 tns 命令我得到

TypeError: Cannot read property 'browser' of undefined
File: "<unknown>, line: 1, column: 265

Apache Thrift v.0.11.0 / 1.0.0dev，Angular v.7.1.0，Nativescript v.5.1.0

在platforms/android/app/src/main/assets/app/vendor.js中我可以看到：

/* istanbul ignore next */
if (undefined.browser) {
    defaultEncoding = 'utf-8'
} else {
    var pVersionMajor = parseInt(undefined.version.split('.')[0].slice(1), 10)

当我期待 global.process.browser 之类的东西时，我却找不到 vendor.js 的另一个和平。 在另一个和平中，我可以看到类似 undefined.nextTick(...) 等的内容。 我知道这是某种 Babel 问题，但我不知道如何解决它。

我使用thrift --gen js:node 脚本生成我的thrift 文件（错误时没有意义）。没有它们，一切都很好，但是后来我试图从 thrift 执行任何 thrift 生成的 file/any 模块，我在上面得到一个异常。 my_component.ts

import { Component, OnInit } from '@angular/core';
import { TJSONProtocol } from 'thrift'; // or anything else 

@Component({...});

export class MyComponent implements OnInit {
    ngOnInit () {
        // console.log(TJSONProtocol); // Uncomment this string to get an exception.
    }
    constructor() {...};
}

ng serve 提供了任何问题。 我希望这里有任何方法可以解决这个错误并使 thrift 与 nativescript 兼容，或者以任何其他方式将 thrift 与 nativescript 一起使用。

Answer 1

当应用程序使用浏览器数据（文档、window 等）时，您需要确保仅当应用程序在浏览器本身中 运行 时才访问此数据，即在 nodejs 中不是这种情况。

为此，请将您需要使用的代码片段放在支票中，例如：

if (typeof window !== 'undefined') {
    // here runs your code...
    console.log(TJSONProtocol);
}

参见：https://angular.io/guide/universal#working-around-the-browser-apis

Answer 2

问题出在默认 webpack.config.js 中，由 Nativescript 提供。在：

plugins: [
        // Define useful constants like TNS_WEBPACK
        new webpack.DefinePlugin({
            "global.TNS_WEBPACK": "true",
            "process": undefined,
        })

您需要删除行 "process": undefined。