l have been trying to solve this error for the last 2 to 3 days. I have a bigger program that gave me that so reproduced the error.
Steps to reproduce the error.
Install the latest version of angular cli version 10 to be precise.
Create an angular new project with ng new atatest.. Mine I called atatest.
Install the latest version of electron which is version 10.
Install the latest version of ngx-electron that is version 2.2.0
Create a main.js in the root directory of the project and populate it with the electron boiler plate code.
I added
import { NgxElectronModule } from 'ngx-electron';in the app.module.ts and included it in the NgModule.imports.In the app.component.ts do the following:
i. Add ElectronServiceimport { ElectronService } from 'ngx-electron';ii. Then in the app.component.ts add the following:
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**
- With that error I added nodeItegration to true in the main process that is main.js.
- With that I got the following error: ERROR TypeError: Cannot read property 'BrowserWindow' of undefined
- I also tried to require electron in the index.html as the following but got the same error:
<script> const electron = require('electron'); </script>
- I have written apps in the past in angular and electron and have never seen such a big problem. The files are as follows:
a. Then the app.module.ts is:
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. The app.component.ts is:
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();
}
}
- ln the 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.In the main.js file we have:
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);
