ref/ postinstall web & electron

README.md

@@ -15,9 +15,8 @@ Bootstrap and package your project with Angular 6(+) and Electron (Typescript +
 
 Currently runs with:
 
-- Angular v6.0.3
-- Angular-CLI v6.0.3
-- Electron v2.0.1
+- Angular v6.0.6
+- Electron v2.0.3
 - Electron Builder v20.13.4
 
 With this sample, you can :
@@ -64,7 +63,7 @@ You can desactivate "Developer Tools" by commenting `win.webContents.openDevTool
 
 |Command|Description|
 |--|--|
-|`npm run ng:serve`| Execute the app in the browser |
+|`npm run ng:serve:web`| Execute the app in the browser |
 |`npm run build`| Build the app. Your built files are in the /dist folder. |
 |`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
 |`npm run electron:local`| Builds your application and start electron
@@ -76,17 +75,9 @@ You can desactivate "Developer Tools" by commenting `win.webContents.openDevTool
 
 ## Browser mode
 
-Maybe you want to execute the application in the browser (WITHOUT HOT RELOAD ACTUALLY...) ? You can do it with `npm run ng:serve`.  
+Maybe you want to execute the application in the browser with hot reload ? You can do it with `npm run ng:serve:web`.  
 Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.
 
-## Error with nodejs third party packages
-
-Since Angular 6 does not provide an eject anymore, you can't configure your webpack config file to import node externals.
-
-An issue in [Angular repository](https://github.com/angular/angular-cli/issues/10681) is opened about this feature. 
-
-Please have a look at [Stack Overflow Post workaround](https://stackoverflow.com/questions/50234196/after-updating-from-angular-5-to-6-i-keep-getting-the-error-cant-resolve-timer) that may work in some cases. Or use branch [angular5](https://github.com/maximegris/angular-electron/tree/angular5) and continue to eject your configuration file.
-
 ## Branch & Packages version
 
 - Angular 4 & Electron 1 : Branch [angular4](https://github.com/maximegris/angular-electron/tree/angular4)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-electron",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Angular 6 with Electron (Typescript + SASS + Hot Reload)",
   "homepage": "https://github.com/maximegris/angular-electron",
   "author": {
@@ -17,44 +17,48 @@
   "main": "main.js",
   "private": true,
   "scripts": {
-    "postinstall": "npx electron-builder install-app-deps && node postinstall",
+    "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-all -p ng:serve electron:serve",
-    "build": "npm run electron:tsc && ng build",
+    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
+    "build": "npm run postinstall:electron && npm run electron:tsc && ng build",
     "build:dev": "npm run build -- -c dev",
     "build:prod": "npm run build -- -c production",
-    "ng:serve": "ng serve -o",
+    "ng:serve": "ng serve",
+    "ng:serve:web": "npm run postinstall:web && ng serve -o",
     "electron:tsc": "tsc main.ts",
     "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron: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": "ng test",
-    "e2e": "ng e2e"
+    "test": "npm run postinstall:web && ng test",
+    "e2e": "npm run postinstall:web && ng e2e"
+  },
+  "dependencies": {
   },
-  "dependencies": {},
   "devDependencies": {
     "@angular-devkit/build-angular": "0.6.3",
-    "@angular/cli": "6.0.3",
-    "@angular/common": "6.0.3",
-    "@angular/compiler": "6.0.3",
-    "@angular/compiler-cli": "6.0.3",
-    "@angular/core": "6.0.3",
-    "@angular/forms": "6.0.3",
-    "@angular/http": "6.0.3",
-    "@angular/language-service": "6.0.3",
-    "@angular/platform-browser": "6.0.3",
-    "@angular/platform-browser-dynamic": "6.0.3",
-    "@angular/router": "6.0.3",
+    "@angular/cli": "6.0.6",
+    "@angular/common": "6.0.6",
+    "@angular/compiler": "6.0.6",
+    "@angular/compiler-cli": "6.0.6",
+    "@angular/core": "6.0.6",
+    "@angular/forms": "6.0.6",
+    "@angular/http": "6.0.6",
+    "@angular/language-service": "6.0.6",
+    "@angular/platform-browser": "6.0.6",
+    "@angular/platform-browser-dynamic": "6.0.6",
+    "@angular/router": "6.0.6",
     "@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": "2.0.2",
+    "electron": "2.0.3",
     "electron-builder": "20.14.7",
     "electron-reload": "1.2.2",
     "jasmine-core": "3.1.0",
@@ -68,7 +72,7 @@
     "npx": "10.2.0",
     "protractor": "5.3.2",
     "rxjs": "6.1.0",
-    "ts-node": "6.0.3",
+    "ts-node": "6.0.6",
     "tslint": "5.10.0",
     "typescript": "2.7.2",
     "wait-on": "2.1.0",

postinstall-web.js

@@ -0,0 +1,16 @@
+// Allow angular using electron module (native node modules)
+const fs = require('fs');
+const f_angular = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
+
+fs.readFile(f_angular, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err);
+  }
+  var result = data.replace(/target: "electron-renderer",/g, '');
+  var result = result.replace(/target: "web",/g, '');
+  var result = result.replace(/return \{/g, 'return {target: "web",');
+
+  fs.writeFile(f_angular, result, 'utf8', function (err) {
+    if (err) return console.log(err);
+  });
+});

postinstall.js

@@ -7,6 +7,7 @@ fs.readFile(f_angular, 'utf8', function (err, data) {
     return console.log(err);
   }
   var result = data.replace(/target: "electron-renderer",/g, '');
+  var result = result.replace(/target: "web",/g, '');
   var result = result.replace(/return \{/g, 'return {target: "electron-renderer",');
 
   fs.writeFile(f_angular, result, 'utf8', function (err) {

src/polyfills.ts

@@ -57,14 +57,14 @@ import 'core-js/es7/reflect';
  * user can disable parts of macroTask/DomEvents patch by setting following flags
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
+/*
+* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+* with the following flag, it will bypass `zone.js` patch for IE/Edge
+*/
 // (window as any).__Zone_enable_cross_context_check = true;
 
 /***************************************************************************************************