DevWurm/entry.js

## entry.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools when in dev mode.
  if(process.env.NODE_ENV=='development')
    win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## entry.live.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  setTimeout(() => {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600})

    // and load the index.html of the app.
    win.loadURL(url.format({
      pathname: 'localhost:4200',
      protocol: 'http:',
      slashes: true
    }))

    // Open the DevTools when in dev mode.
    if(process.env.NODE_ENV=='development')
      win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }, 12000)
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HelloElectron</title>
  <!-- MODIFIED LINE -->
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

## installation.sh
yarn global add @angular/cli
yarn add -D webpack html-webpack-plugin extract-text-webpack-plugin postcss-url @ngtools/webpack electron @types/electron copy-webpack-plugin karma-electron concurrently electron-packager

## karma.conf.js
...
module.exports = function (config) {
  config.set({
   ...
    plugins: [
      require('karma-jasmine'),
      // MODIFIED LINE
      require('karma-electron'),
      ...
    ],
    ...
    // MODIFIED LINE
    browsers: ['Electron'],

    // INSERTED LINES
    client: {
      useIframe: false
    },
    ...
  });
};

## package.json
{
  ...
  "main": "dist/entry.js",
  ...
  "scripts": {
    "run": "electron .",
    "start": "concurrently \"webpack-dev-server --port=4200\" \"electron src/entry.live.js\"",
    "ng": "ng",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "package:linux": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=linux --arch=all --overwrite",
    "package:mac": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=darwin --arch=all --overwrite ",
    "package:win": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --platform=win32 --arch=all --overwrite ",
    "package:all": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.*\\.conf\\.js --ignore=\"(angular-cli|tsconfig)\\.json\" --ignore=webpack.*\\.js --out=packages --all --overwrite"
  },
 ...
}

## polyfills.ts
...

// modified line, previously: import 'zone.js/dist/zone';
import 'zone.js/dist/zone-mix';  // Included with Angular CLI.

...

## protractor.conf.js
...
exports.config = {
   ...
  capabilities: {
    // INSERTED LINES
    chromeOptions: {
      binary: './node_modules/electron/dist/electron',
      args: ['--test-type=webdriver']
    },
    'browserName': 'chrome'
  },
  ...
};

## tsconfig.app.json
{
  ...
  "compilerOptions": {
    ...
    "typeRoots": [
        "../node_modules/@types"
    ],
    "types": [
        "node"
    ]
  },
  ...
}

## tsconfig.e2e.json
{
  ...
  "compilerOptions": {
    ...
    "typeRoots": [
        "../node_modules/@types"
    ],
    ...
  }
}

## tsconfig.spec.json
{
  ...
  "compilerOptions": {
    ...
    "typeRoots": [
        "../node_modules/@types"
    ],
    ...
  }
}

## webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const baseHref = "";
const deployUrl = "";


module.exports = {
  // INSERTED LINE
  "target": "electron-renderer",
  ...
  "plugins": [
    ...
    // INSERTED LINES
    new CopyWebpackPlugin([{
      context: path.resolve(__dirname, "src"),
      from: "entry.js"
    }]),
    ...
  ],
  // MODIFIED LINES
  "node": {
    "fs": false,
    "global": false,
    "crypto": false,
    "tls": false,
    "net": false,
    "process": false,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false,
    "Buffer": false,
    "__filename": false,
    "__dirname": false
  }
};
	const {app, BrowserWindow} = require('electron')
	const path = require('path')
	const url = require('url')

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let win

	function createWindow () {
	// Create the browser window.
	win = new BrowserWindow({width: 800, height: 600})

	// and load the index.html of the app.
	win.loadURL(url.format({
	pathname: path.join(__dirname, 'index.html'),
	protocol: 'file:',
	slashes: true
	}))

	// Open the DevTools when in dev mode.
	if(process.env.NODE_ENV=='development')
	win.webContents.openDevTools()

	// Emitted when the window is closed.
	win.on('closed', () => {
	// Dereference the window object, usually you would store windows
	// in an array if your app supports multi windows, this is the time
	// when you should delete the corresponding element.
	win = null
	})
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', () => {
	// On macOS it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', () => {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (win === null) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HelloElectron</title>
	<!-- MODIFIED LINE -->
	<base href="./">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	</head>
	<body>
	<app-root>Loading...</app-root>
	</body>
	</html>
	yarn global add @angular/cli
	yarn add -D webpack html-webpack-plugin extract-text-webpack-plugin postcss-url @ngtools/webpack electron @types/electron copy-webpack-plugin karma-electron concurrently electron-packager
	...
	module.exports = function (config) {
	config.set({
	...
	plugins: [
	require('karma-jasmine'),
	// MODIFIED LINE
	require('karma-electron'),
	...
	],
	...
	// MODIFIED LINE
	browsers: ['Electron'],

	// INSERTED LINES
	client: {
	useIframe: false
	},
	...
	});
	};
	{
	...
	"main": "dist/entry.js",
	...
	"scripts": {
	"run": "electron .",
	"start": "concurrently \"webpack-dev-server --port=4200\" \"electron src/entry.live.js\"",
	"ng": "ng",
	"build": "webpack",
	"test": "karma start ./karma.conf.js",
	"lint": "ng lint",
	"e2e": "protractor ./protractor.conf.js",
	"prepree2e": "npm start",
	"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
	"package:linux": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\\.conf\\.js --ignore=\"(angular-cli\|tsconfig)\\.json\" --ignore=webpack.\\.js --out=packages --platform=linux --arch=all --overwrite",
	"package:mac": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\\.conf\\.js --ignore=\"(angular-cli\|tsconfig)\\.json\" --ignore=webpack.\\.js --out=packages --platform=darwin --arch=all --overwrite ",
	"package:win": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\\.conf\\.js --ignore=\"(angular-cli\|tsconfig)\\.json\" --ignore=webpack.\\.js --out=packages --platform=win32 --arch=all --overwrite ",
	"package:all": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\\.conf\\.js --ignore=\"(angular-cli\|tsconfig)\\.json\" --ignore=webpack.\\.js --out=packages --all --overwrite"
	},
	...
	}
	...

	// modified line, previously: import 'zone.js/dist/zone';
	import 'zone.js/dist/zone-mix'; // Included with Angular CLI.

	...
	...
	exports.config = {
	...
	capabilities: {
	// INSERTED LINES
	chromeOptions: {
	binary: './node_modules/electron/dist/electron',
	args: ['--test-type=webdriver']
	},
	'browserName': 'chrome'
	},
	...
	};
	{
	...
	"compilerOptions": {
	...
	"typeRoots": [
	"../node_modules/@types"
	],
	"types": [
	"node"
	]
	},
	...
	}
	const CopyWebpackPlugin = require('copy-webpack-plugin');
	const path = require('path');
	const ProgressPlugin = require('webpack/lib/ProgressPlugin');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const ExtractTextPlugin = require('extract-text-webpack-plugin');
	const autoprefixer = require('autoprefixer');
	const postcssUrl = require('postcss-url');

	const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack');
	const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
	const { CommonsChunkPlugin } = require('webpack').optimize;
	const { AotPlugin } = require('@ngtools/webpack');

	const nodeModules = path.join(process.cwd(), 'node_modules');
	const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
	const baseHref = "";
	const deployUrl = "";




	module.exports = {
	// INSERTED LINE
	"target": "electron-renderer",
	...
	"plugins": [
	...
	// INSERTED LINES
	new CopyWebpackPlugin([{
	context: path.resolve(__dirname, "src"),
	from: "entry.js"
	}]),
	...
	],
	// MODIFIED LINES
	"node": {
	"fs": false,
	"global": false,
	"crypto": false,
	"tls": false,
	"net": false,
	"process": false,
	"module": false,
	"clearImmediate": false,
	"setImmediate": false,
	"Buffer": false,
	"__filename": false,
	"__dirname": false
	}
	};