René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Support for Electron and Externals","articleBody":"\u003e Please provide us with the following information:\r\n\u003e ---------------------------------------------------------------\r\n\r\n### OS?\r\n\u003e All OSes\r\n\r\n\r\n### Versions.\r\n\u003e1.0.0-beta.26\r\n\r\n\r\n### Repro steps.\r\n\u003e clone my electron starter project\r\n\u003e git clone https://github.com/gregvis/angularcli-electron.git\r\n\u003e cd into it\r\n\u003e npm i\r\n\u003e npm start\r\n\u003e error in console \"Uncaught TypeError: fs.existsSync is not a function\"\r\n\r\n\r\n### The log given by the failure.\r\n\u003e \"Uncaught TypeError: fs.existsSync is not a function\"\r\n\r\n\r\n### Mention any other details that might be useful.\r\n\r\n\u003e In app.component.ts, i have this code:\r\n`import { Component } from '@angular/core';\r\nconst remote = require('electron').remote;\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  constructor() {\r\n    remote.dialog.showOpenDialog({ title: 'Electron Works!' });\r\n  }\r\n}`\r\n\r\nThe remote.dialog.showOpenDialog does a call to a nodejs fs function. In order to fix this, I need the require('electron') to be ignored by webpack. \r\n\r\nThere are 2 ways to do this. In \"webpack-build-common\", \r\n1.\r\n`target: 'electron-renderer'`\r\nThis basically adds a bunch of 'externals' that webpack ignores for packing. You can see the code here:\r\nhttps://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185\r\n\r\nThis does fix the issue, however, there are cases where I would like to be able to add other externals, such as the npm package \"drivelist\" which uses a \"child_process\" to get a list of drives connected to the system. It doesn't work properly if it is bundled by webpack. \r\n\r\nSo in order for me to use both electron AND drivelist, i added the following to \"webpack-build-common\"\r\n\r\n2. \r\n`externals: {\r\n            'electron' : 'commonjs electron',\r\n            'drivelist' : 'commonjs ' + nodeModules + '/drivelist'\r\n        }`\r\n\r\n\r\nSo ideally, I need a way to add target and/or externals to the webpack build. ","author":{"url":"https://github.com/gregvis","@type":"Person","name":"gregvis"},"datePublished":"2017-01-25T16:26:01.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":22},"url":"https://github.com/4227/angular-cli/issues/4227"}