How do you run this on a web browser?

[davvit]

No description provided.

[isurendrasingh]

npm run ng:serve:web
Instructions are provided. Check them.

[davvit]

I reduced it to these 2 errors. Not sure why the dependency to fs and path is not there in package.js in the node_module electron package.js

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\workspace\xxx\angular-electron\node_modules\electron'
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'path' in 'D:\workspace\xxx\angular-electron\node_modules\electron'

[soupman99]

+1

[isurendrasingh]

It's working on my side without any warnings. Please provide details and your package.json file.

[davvit]

@isurendrasingh Here it is. Thanks for taking time to help out.

package.json

{
  "name": "angular-electron",
  "version": "4.2.2",
  "description": "Angular 6 with Electron (Typescript + SASS + Hot Reload)",
  "homepage": "https://github.com/maximegris/angular-electron",
  "author": {
    "name": "Maxime GRIS",
    "email": "maxime.gris@gmail.com"
  },
  "keywords": [
    "angular",
    "angular 6",
    "electron",
    "typescript",
    "sass"
  ],
  "main": "main.js",
  "private": true,
  "scripts": {
    "postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
    "postinstall:web": "node postinstall-web",
    "postinstall:electron": "node postinstall",
    "ng": "ng",
    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
    "build": "npm run postinstall:electron && npm run electron:serve-tsc && ng build",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "ng:serve": "ng serve",
    "ng:serve:web": "npm run postinstall:web && ng serve -o",
    "electron:serve-tsc": "tsc -p tsconfig-serve.json",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
    "electron:local": "npm run build:prod && electron .",
    "electron:linux": "npm run build:prod && npx electron-builder build --linux",
    "electron:windows": "npm run build:prod && npx electron-builder build --windows",
    "electron:mac": "npm run build:prod && npx electron-builder build --mac",
    "test": "npm run postinstall:web && ng test",
    "e2e": "npm run postinstall:web && ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/fire": "^5.1.0",
    "@angular/material": "^6.4.7",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "angular2-indexeddb": "^1.2.2",
    "dexie": "^2.0.4",
    "electron-titlebar": "0.0.3",
    "firebase": "^5.5.7",
    "ng-animate": "^0.3.4",
    "ng-click-outside": "^4.0.0",
    "ng-spin-kit": "^5.1.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.3",
    "@angular/cli": "^7.0.6",
    "@angular/common": "6.1.2",
    "@angular/compiler": "6.1.2",
    "@angular/compiler-cli": "6.1.2",
    "@angular/core": "6.1.2",
    "@angular/forms": "6.1.2",
    "@angular/http": "6.1.2",
    "@angular/language-service": "6.1.2",
    "@angular/platform-browser": "6.1.2",
    "@angular/platform-browser-dynamic": "6.1.2",
    "@angular/router": "6.1.2",
    "@fortawesome/fontawesome-free": "^5.4.2",
    "@ngx-translate/core": "10.0.1",
    "@ngx-translate/http-loader": "3.0.1",
    "@types/jasmine": "2.8.7",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "8.9.4",
    "codelyzer": "4.2.1",
    "core-js": "2.5.6",
    "electron": "3.0.8",
    "electron-builder": "20.28.1",
    "electron-reload": "1.2.2",
    "jasmine-core": "3.1.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.2",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.0",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "1.1.0",
    "npm-run-all": "4.1.3",
    "npx": "10.2.0",
    "protractor": "5.3.2",
    "rxjs": "^6.3.3",
    "ts-node": "6.0.3",
    "tslint": "5.10.0",
    "typescript": "2.7.2",
    "wait-on": "2.1.0",
    "webdriver-manager": "12.0.6",
    "zone.js": "0.8.26"
  }
}

[isurendrasingh]

The errors you are getting is due to the declaration of modules used by your app. There must be no modules exported that you are using.

Check the declaration of these modules:
fs, timers & crypto

Does this application works locally?
npm run electron:local

Also these might help:
Resolving fs

Resolving timers npm install events buffer stream timers --save

Also try to use the updated package which uses Angular 7 with Electron 3 (master-branch).

[davvit]

I grabbed master and only updated package.json to what I was working on - web build works.

Moved my app folder into this new master app folder and replaced some of the remote Electron imports with the ElectronService provided - removed the errors I was seeing.

I still see the warnings and web build fails due to these warnings ..so more debugging.

WARNING in ./node_modules/zone.js/dist/zone-mix.js
Module not found: Error: Can't resolve 'crypto' in 'D:\workspace\xxx\new\angular-electron\node_modules\zone.js\dist'

WARNING in ./node_modules/zone.js/dist/zone-mix.js
Module not found: Error: Can't resolve 'fs' in 'D:\workspace\xxx\new\angular-electron\node_modules\zone.js\dist'

WARNING in ./node_modules/zone.js/dist/zone-mix.js
Module not found: Error: Can't resolve 'timers' in 'D:\workspace\xxx\new\angular-electron\node_modules\zone.js\dist'
i ｢wdm｣: Compiled with warnings.

after hours of trying different things, I found these bug reports and it seems there is a larger issue with latest angular CLI, electron and node modules.

angular/angular-cli#10681
angular/angular-cli#9827 (comment)

There are these closed bugs on this repo with same issue.
#267
#227
#195

based on #227
i did

To solve:
In the node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-config\browser.js change node: false to node: {crypto: true, fs: 'empty'}

this removes the warnings completely but now Angular is stuck on Loading.. with console error as follows.

vendor.js:228304 Uncaught Error: Zone already loaded.
    at vendor.js:228304
    at vendor.js:228916
    at vendor.js:228282
    at Object.<anonymous> (vendor.js:228284)
    at Object../node_modules/zone.js/dist/zone-mix.js (vendor.js:231584)
    at __webpack_require__ (runtime.js:84)
    at Module../src/app/app.module.ts (main.js:3420)
    at __webpack_require__ (runtime.js:84)
    at Module../src/main.ts (main.js:6037)
    at __webpack_require__ (runtime.js:84)

​
my setup is as follows.

Electron : v3.0.10

Angular CLI: 7.0.5
Node: 8.9.4
OS: win32 x64
Angular: 7.0.3
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.0.5
@angular/animations               6.1.10
@angular/cdk                      6.4.7
@angular/cli                      7.0.5
@angular/fire                     5.1.0
@angular/material                 6.4.7
@ngtools/webpack                  7.0.6
@schematics/angular               7.0.5
@schematics/update                0.10.5
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

@maximegris can you check on this please?

[maximegris]

Hi

You may have to replace the content at the end of polyfill.ts (zone-mix must be removed).
You need this :

[...] 
/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */