错误TypeError：无法读取角度版本10和电子版本10以及ngx-electron 2.2.0

问题描述

l在过去的2到3天内一直在尝试解决此错误。我有一个更大的程序，让我重现了错误。

重现该错误的步骤。

安装最新版本的 angular cli 版本10 。
使用 ng新的atatest 创建一个有角度的新项目。我的矿井叫 atatest 。
安装最新版本的电子，该版本为版本10 。
安装最新版本的 ngx-electron ，该版本为版本2.2.0
在项目的根目录中创建一个main.js，并在其中添加电子样板代码。
我在 app.module.ts 中添加了 import { NgxElectronModule } from 'ngx-electron'; ，并包括了在 NgModule.imports 中。
在 app.component.ts 中执行以下操作：
一世。添加 ElectronService import { ElectronService } from 'ngx-electron';

ii。然后在 app.component.ts 中添加以下内容：

brower: any;
 constructor(private _electronService: ElectronService) {
 this.browse = this._electronService.remote.browserWindow;
}

  -> At this point I got: **ERROR TypeError: Cannot read property 'browserWindow' of null** which 
     also was the same when I tried it with any instance of electron including require which was 
     **ERROR TypeError: Cannot read property 'require' of null**

由于这个错误，我在主进程 main.js 中将 nodeItegration添加为true 。
因此，出现以下错误： 错误TypeError：无法读取未定义的属性“ browserWindow”
我还试图在index.html中要求电子如下，但得到相同的错误：

<script> const electron = require('electron'); </script>

我过去曾经编写过角度和电子方面的应用程序，但从未见过这么大的问题。的文件如下：

a。然后 app.module.ts 是：

import { browserModule } from '@angular/platform-browser';
    
    
    import { NgModule } from '@angular/core';
    import { NgxElectronModule } from 'ngx-electron';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],imports: [
        browserModule,AppRoutingModule,NgxElectronModule
      ],providers: [],bootstrap: [AppComponent]
    })
    export class AppModule { }

b。 app.component.ts 是：

     import { Component,OnInit } from '@angular/core';
        
        import { ElectronService } from 'ngx-electron';
        
        @Component({
        
          selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
        
        })
        export class AppComponent implements OnInit {
        
          browse: any;
        
          constructor(private _electronService: ElectronService){
        
           this.browse = this._electronService.remote.browserWindow;
        
          }
        
          title = 'atatest';
        
            launch(){
        
              let win: any;
        
              win = new this.browse({
        
                 width: 800,height: 600
        
              });
        
              win.loadURL('https://google.com');
        
            }
        
        ngOnInit(){
        
           this.launch();
        
        }
        
        }

在package.json中


       {
  "name": "atatest","version": "0.0.0","main": "main.js","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e","electron": "electron ."
  },"private": true,"dependencies": {
    "@angular/animations": "~10.0.5","@angular/common": "~10.0.5","@angular/compiler": "~10.0.5","@angular/core": "~10.0.5","@angular/forms": "~10.0.5","@angular/platform-browser": "~10.0.5","@angular/platform-browser-dynamic": "~10.0.5","@angular/router": "~10.0.5","electron": "^10.1.1","electron-rebuild": "^2.0.1","ngx-electron": "^2.2.0","rxjs": "~6.5.5","sqlite3": "^5.0.0","tslib": "^2.0.0","zone.js": "~0.10.3"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4","@angular/cli": "~10.0.4","@angular/compiler-cli": "~10.0.5","@types/node": "^12.11.1","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","codelyzer": "^6.0.0","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~3.3.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~3.9.5"
  }
}

13。在 main.js 文件中，我们具有：

    const { app,browserWindow } = require ('electron');
    const path = require ('path');
    const url = require('url');
    
    let win;
     function createWindow(){
         //create the browser window
         win = new browserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}
                                })
    
         win.loadURL(url.format({
             pathname: path.join(__dirname,'dist/atatest/index.html'),protocol: 'file:',slashes: true,webPreferences: {nodeIntegration: true}
         }))
    
           // Open the DevTools optionally:
       win.webContents.openDevTools()
    
       win.on('closed',()=>{
           win =null;
       })
    }
    
    app.on('ready',createWindow);

解决方法

问题在于电子版本10 默认情况下已远程禁用 。我通过创建一个新的角度项目并安装了9版而非10版电子版来识别它。

I版本10 默认情况下禁用远程。在我的情况下 main.js 中，您必须在 webPreferences 中将enableRemoteModule设置为true ，在电子进入文件中手动启用它。 / strong>就像一个超级按钮，错误就消失了。因此，代码修改如下： win = new BrowserWindow({width: 800,height: 600,webPreferences: { nodeIntegration: true,enableRemoteModule: true } })