{"id":13580956,"url":"https://github.com/dashkan/ng-electron-devkit","last_synced_at":"2025-04-11T23:11:23.862Z","repository":{"id":106243972,"uuid":"138798517","full_name":"dashkan/ng-electron-devkit","owner":"dashkan","description":"Angular Webpack Build Facade for Electron","archived":false,"fork":false,"pushed_at":"2018-11-26T20:55:59.000Z","size":316,"stargazers_count":12,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T11:01:46.346Z","etag":null,"topics":["angular","angular-cli","angular6","electron"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dashkan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-26T22:03:17.000Z","updated_at":"2020-03-28T11:55:17.000Z","dependencies_parsed_at":"2024-01-21T22:11:35.457Z","dependency_job_id":"f3e235d5-ce0c-4354-a60b-4fad3f220996","html_url":"https://github.com/dashkan/ng-electron-devkit","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"ccbbdabea206980d9803f49cc1d02ee2495e588e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashkan%2Fng-electron-devkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashkan%2Fng-electron-devkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashkan%2Fng-electron-devkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashkan%2Fng-electron-devkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashkan","download_url":"https://codeload.github.com/dashkan/ng-electron-devkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248492868,"owners_count":21113163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","angular6","electron"],"created_at":"2024-08-01T15:01:56.748Z","updated_at":"2025-04-11T23:11:23.833Z","avatar_url":"https://github.com/dashkan.png","language":"TypeScript","readme":"# Angular Webpack Build Facade for Electron\nAllows targeting electron renderer in Angular 6 applications.\n\n## Installation\nnpm install ng-electron-devkit --save-dev\n\n## Configuration\n\n1. Install electron and cpx in your project\n```sh \nnpm install electron --save\nnpm install cpx --save-dev\n```\n\n2. Create electron main application (src/electron/index.ts)\n```typescript\nimport {app, BrowserWindow, ipcMain} from 'electron';\n\nif (process.mas) app.setName('Angular 6 / Electron Demo')\n\n// Keep a global reference of the window object, if you don't, the window will\n// be closed automatically when the JavaScript object is garbage collected.\nlet mainWindow: BrowserWindow\n\nfunction createWindow () {\n  // Create the browser window.\n  mainWindow = new BrowserWindow({width: 800, height: 600})\n\n  // and load the index.html of the app.\n  mainWindow.loadFile('index.html')\n\n  // Open the DevTools.\n  // mainWindow.webContents.openDevTools()\n\n  // Emitted when the window is closed.\n  mainWindow.on('closed', () =\u003e {\n    // Dereference the window object, usually you would store windows\n    // in an array if your app supports multi windows, this is the time\n    // when you should delete the corresponding element.\n    mainWindow = null\n  })\n}\n\n// This method will be called when Electron has finished\n// initialization and is ready to create browser windows.\n// Some APIs can only be used after this event occurs.\napp.on('ready', createWindow)\n\n// Quit when all windows are closed.\napp.on('window-all-closed', () =\u003e {\n  // On OS X it is common for applications and their menu bar\n  // to stay active until the user quits explicitly with Cmd + Q\n  if (process.platform !== 'darwin') {\n    app.quit()\n  }\n})\n\napp.on('activate', () =\u003e {\n  // On OS X it's common to re-create a window in the app when the\n  // dock icon is clicked and there are no other windows open.\n  console.log('activated');\n  if (mainWindow === null) {\n    createWindow()\n  }\n})\n```\n\n3. Create tsconfig.json for electron main application (src/electron/tsconfig.json). Note: outDir must resolve to the same path that outputPath does in step #10  \n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es6\",\n    \"module\": \"commonjs\",\n    \"outDir\": \"../../dist/electron\",\n    \"strict\": false,\n    \"esModuleInterop\": true\n  }\n}\n```\n\n4. Add isElectron: false value to src/environments/environment.ts and src/environments/environment.prod.ts\n\n5. Add default electron environment (src/environments/environment.electron.ts)\n```typescript\n// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.\n// The list of file replacements can be found in `angular.json`.\n\nexport const environment = {\n  production: false,\n  isElectron: true\n};\n\n/*\n * In development mode, to ignore zone related error stack frames such as\n * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can\n * import the following file, but please comment it out in production mode\n * because it will have performance impact when throw error\n */\nimport 'zone.js/dist/zone-error';  // Included with Angular CLI.\n```\n\n6. Add production electron environment (src/environments/environment.electron-prod.ts)\n```typescript\nexport const environment = {\n  production: true,\n  isElectron: true\n};\n```\n\n7. Electron does not support reloading html5 routes. Check to see if we are running in electron and set routing to use hash. Update src/app/app-routing.module.ts\n```typescript\nimport { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { environment } from '../environments/environment';\n\nconst routes: Routes = [];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes, { useHash: environment.isElectron })],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n```\n\n8. Create new electron specific polyfill file (src/polyfills-electron.ts)\n```typescript\n/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfills to this file.\n *\n * This file is divided into 2 sections:\n *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.\n *   2. Application imports. Files imported after ZoneJS that should be loaded before your main\n *      file.\n *\n * The current setup is for so-called \"evergreen\" browsers; the last versions of browsers that\n * automatically update themselves. This includes Safari \u003e= 10, Chrome \u003e= 55 (including Opera),\n * Edge \u003e= 13 on the desktop, and iOS 10 and Chrome on mobile.\n *\n * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html\n */\n\n/***************************************************************************************************\n * BROWSER POLYFILLS\n */\n\n/** IE9, IE10 and IE11 requires all of the following polyfills. **/\n// import 'core-js/es6/symbol';\n// import 'core-js/es6/object';\n// import 'core-js/es6/function';\n// import 'core-js/es6/parse-int';\n// import 'core-js/es6/parse-float';\n// import 'core-js/es6/number';\n// import 'core-js/es6/math';\n// import 'core-js/es6/string';\n// import 'core-js/es6/date';\n// import 'core-js/es6/array';\n// import 'core-js/es6/regexp';\n// import 'core-js/es6/map';\n// import 'core-js/es6/weak-map';\n// import 'core-js/es6/set';\n\n/** Evergreen browsers require these. **/\n// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.\nimport 'core-js/es7/reflect';\n\n\n/**\n * Web Animations `@angular/platform-browser/animations`\n * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.\n * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).\n **/\n// import 'web-animations-js';  // Run `npm install --save web-animations-js`.\n\n/**\n * By default, zone.js will patch all possible macroTask and DomEvents\n * user can disable parts of macroTask/DomEvents patch by setting following flags\n */\n\n // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick\n // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n\n /*\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n */\n// (window as any).__Zone_enable_cross_context_check = true;\n\n/***************************************************************************************************\n * Zone JS is required by default for Angular itself.\n */\nimport 'zone.js/dist/zone-mix';  // Included with Angular CLI.\nimport 'zone.js/dist/zone-patch-electron';\n\n\n\n/***************************************************************************************************\n * APPLICATION IMPORTS\n */\n```\n\n9. Update scripts in package.json to build electron project\n```json\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"start:electron\": \"electron dist/electron\",\n    \"build\": \"ng build\",\n    \"build:electron-main\": \"tsc -p src/electron\",\n    \"postbuild:electron-main\": \"cpx package.json dist/electron\",\n    \"build:electron-renderer\": \"ng build electron\",\n    \"build:electron\": \"npm run build:electron-renderer \u0026\u0026 npm run build:electron-main\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n```\n\n10. Create a new project config in ***angular.json***. \n    - Copy contents from initial project\n    - Rename the project to electron\n    - Change ***architect/build/builder*** from ***@angular-devkit/build-angular:browser*** to *ng-electron-devkit:renderer*\n    - Change ***architect/build/options/outputPath*** to dist/electron\n    - Create default environment for electron project ***architect/build/options/fileReplacements***\n    ```json\n    \"fileReplacements\": [\n      {\n        \"replace\": \"src/environments/environment.ts\",\n        \"with\": \"src/environments/environment.electron.ts\"\n      }\n    ]\n    ```\n    - Remove serve section / property \n    - (OPTIONAL) If using routing set ***architect/build/options/baseRef*** to an empty string.\n\nSample angular.json electron project\n```json\n    \"electron\": {\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"projectType\": \"application\",\n      \"prefix\": \"app\",\n      \"schematics\": {\n        \"@schematics/angular:component\": {\n          \"styleext\": \"scss\"\n        }\n      },\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"ng-electron-devkit:renderer\",\n          \"options\": {\n            \"outputPath\": \"dist/electron\",\n            \"index\": \"src/index.html\",\n            \"main\": \"src/main.ts\",\n            \"polyfills\": \"src/polyfills-electron.ts\",\n            \"tsConfig\": \"src/tsconfig.app.json\",\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ],\n            \"styles\": [\n              \"src/styles.scss\"\n            ],\n            \"scripts\": [],\n            \"baseHref\": \"\",\n            \"fileReplacements\": [\n              {\n                \"replace\": \"src/environments/environment.ts\",\n                \"with\": \"src/environments/environment.electron.ts\"\n              },\n              {\n                \"replace\": \"src/app/ipc.service.ts\",\n                \"with\": \"src/app/ipc.service-electron.ts\"\n              }\n            ]\n          },\n          \"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.electron-prod.ts\"\n                }\n              ],\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": false,\n              \"extractCss\": true,\n              \"namedChunks\": false,\n              \"aot\": true,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true\n            }\n          }\n        },\n        \"extract-i18n\": {\n          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n          \"options\": {\n            \"browserTarget\": \"sample:build\"\n          }\n        },\n        \"test\": {\n          \"builder\": \"@angular-devkit/build-angular:karma\",\n          \"options\": {\n            \"main\": \"src/test.ts\",\n            \"polyfills\": \"src/polyfills.ts\",\n            \"tsConfig\": \"src/tsconfig.spec.json\",\n            \"karmaConfig\": \"src/karma.conf.js\",\n            \"styles\": [\n              \"src/styles.scss\"\n            ],\n            \"scripts\": [],\n            \"assets\": [\n              \"src/favicon.ico\",\n              \"src/assets\"\n            ]\n          }\n        },\n        \"lint\": {\n          \"builder\": \"@angular-devkit/build-angular:tslint\",\n          \"options\": {\n            \"tsConfig\": [\n              \"src/tsconfig.app.json\",\n              \"src/tsconfig.spec.json\"\n            ],\n            \"exclude\": [\n              \"**/node_modules/**\"\n            ]\n          }\n        }\n      }\n    }\n```\n\n11. Add main property to package.json\n```json\n\"main\": \"index.js\"\n```\n\n12. Build your project\n```sh\nnpm run build:electron\n```\n\n12. Launch your electron application!!!!\n```sh\nnpm run start:electron\n```\n\n## Sample Application\n\nClone this repository and checkout the [sample](./sample)","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashkan%2Fng-electron-devkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashkan%2Fng-electron-devkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashkan%2Fng-electron-devkit/lists"}