{"id":13406808,"url":"https://github.com/maximegris/angular-electron","last_synced_at":"2025-05-13T23:07:40.544Z","repository":{"id":38359389,"uuid":"86981224","full_name":"maximegris/angular-electron","owner":"maximegris","description":"Ultra-fast bootstrapping with Angular and Electron :speedboat:","archived":false,"fork":false,"pushed_at":"2024-08-31T03:29:01.000Z","size":4489,"stargazers_count":5687,"open_issues_count":22,"forks_count":1376,"subscribers_count":186,"default_branch":"main","last_synced_at":"2025-04-30T13:57:58.333Z","etag":null,"topics":["angular","angular-routing","desktop-app","electron","hot-reload","native-libraries","sass","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://www.maximegris.fr/angular-electron/","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/maximegris.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"maximegris","patreon":"user?u=37550953","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":"maximegris","otechie":null,"custom":null}},"created_at":"2017-04-02T11:15:28.000Z","updated_at":"2025-04-30T12:10:43.000Z","dependencies_parsed_at":"2023-12-28T14:28:47.367Z","dependency_job_id":"34cc5deb-eeb8-4a2b-b337-c00e1c4c373b","html_url":"https://github.com/maximegris/angular-electron","commit_stats":{"total_commits":457,"total_committers":73,"mean_commits":6.260273972602739,"dds":0.5273522975929978,"last_synced_commit":"18c5431a6e6213718ffdaa436261b79a3244b280"},"previous_names":[],"tags_count":106,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximegris%2Fangular-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximegris%2Fangular-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximegris%2Fangular-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximegris%2Fangular-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximegris","download_url":"https://codeload.github.com/maximegris/angular-electron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254041315,"owners_count":22004702,"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-routing","desktop-app","electron","hot-reload","native-libraries","sass","typescript","webpack"],"created_at":"2024-07-30T19:02:39.820Z","updated_at":"2025-05-13T23:07:35.489Z","avatar_url":"https://github.com/maximegris.png","language":"TypeScript","readme":"[![Angular Logo](https://www.vectorlogo.zone/logos/angular/angular-icon.svg)](https://angular.io/) [![Electron Logo](https://www.vectorlogo.zone/logos/electronjs/electronjs-icon.svg)](https://electronjs.org/)\n\n![Maintained][maintained-badge]\n[![Make a pull request][prs-badge]][prs]\n[![License][license-badge]](LICENSE.md)\n\n[![Linux Build][linux-build-badge]][linux-build]\n[![MacOS Build][macos-build-badge]][macos-build]\n[![Windows Build][windows-build-badge]][windows-build]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n# Introduction\n\nBootstrap and package your project with Angular 17 and Electron 30 (Typescript + SASS + Hot Reload) for creating Desktop applications.\n\nCurrently runs with:\n\n- Angular v17.3.6\n- Electron v30.0.1\n\nWith this sample, you can:\n\n- Run your app in a local development environment with Electron \u0026 Hot reload\n- Run your app in a production environment\n- Execute your tests with Jest and Playwright (E2E)\n- Package your app into an executable file for Linux, Windows \u0026 Mac\n\n/!\\ Hot reload only pertains to the renderer process. The main electron process is not able to be hot reloaded, only restarted.\n\n/!\\ Angular CLI \u0026 Electron Builder needs Node 18.10 or later to work correctly.\n\n## Getting Started\n\n*Clone this repository locally:*\n\n``` bash\ngit clone https://github.com/maximegris/angular-electron.git\n```\n\n*Install dependencies with npm (used by Electron renderer process):*\n\n``` bash\nnpm install\n```\n\nThere is an issue with `yarn` and `node_modules` when the application is built by the packager. Please use `npm` as dependencies manager.\n\nIf you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.\nPlease follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.\n\n``` bash\nnpm install -g @angular/cli\n```\n\n*Install NodeJS dependencies with npm (used by Electron main process):*\n\n``` bash\ncd app/\nnpm install\n```\n\nWhy two package.json ? This project follow [Electron Builder two package.json structure](https://www.electron.build/tutorials/two-package-structure) in order to optimize final bundle and be still able to use Angular `ng add` feature.\n\n## To build for development\n\n- **in a terminal window** -\u003e npm start\n\nVoila! You can use your Angular + Electron app in a local development environment with hot reload!\n\nThe application code is managed by `app/main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200), and an Electron window. \\\nThe Angular component contains an example of Electron and NodeJS native lib import. \\\nYou can disable \"Developer Tools\" by commenting `win.webContents.openDevTools();` in `app/main.ts`.\n\n## Project structure\n\n| Folder | Description                                      |\n|--------|--------------------------------------------------|\n| app    | Electron main process folder (NodeJS)            |\n| src    | Electron renderer process folder (Web / Angular) |\n\n## How to import 3rd party libraries\n\nThis sample project runs in both modes (web and electron). To make this work, **you have to import your dependencies the right way**. \\\n\nThere are two kind of 3rd party libraries :\n- NodeJS's one - Uses NodeJS core module (crypto, fs, util...)\n    - I suggest you add this kind of 3rd party library in `dependencies` of both `app/package.json` and `package.json (root folder)` in order to make it work in both Electron's Main process (app folder) and Electron's Renderer process (src folder).\n\nPlease check `providers/electron.service.ts` to watch how conditional import of libraries has to be done when using NodeJS / 3rd party libraries in renderer context (i.e. Angular).\n\n- Web's one (like bootstrap, material, tailwind...)\n    - It have to be added in `dependencies` of `package.json  (root folder)`\n\n## Add a dependency with ng-add\n\nYou may encounter some difficulties with `ng-add` because this project doesn't use the defaults `@angular-builders`. \\\nFor example you can find [here](HOW_TO.md) how to install Angular-Material with `ng-add`.\n\n## Browser mode\n\nMaybe you only want to execute the application in the browser with hot reload? Just run `npm run ng:serve:web`.\n\n## Included Commands\n\n| Command                  | Description                                                                                           |\n|--------------------------|-------------------------------------------------------------------------------------------------------|\n| `npm run ng:serve`       | Execute the app in the web browser (DEV mode)                                                         |\n| `npm run web:build`      | Build the app that can be used directly in the web browser. Your built files are in the /dist folder. |\n| `npm run electron:local` | Builds your application and start electron locally                                                    |\n| `npm run electron:build` | Builds your application and creates an app consumable based on your operating system                  |\n\n**Your application is optimised. Only /dist folder and NodeJS dependencies are included in the final bundle.**\n\n## You want to use a specific lib (like rxjs) in electron main thread ?\n\nYES! You can do it! Just by importing your library in npm dependencies section of `app/package.json` with `npm install --save XXXXX`. \\\nIt will be loaded by electron during build phase and added to your final bundle. \\\nThen use your library by importing it in `app/main.ts` file. Quite simple, isn't it?\n\n## E2E Testing\n\nE2E Test scripts can be found in `e2e` folder.\n\n| Command       | Description               |\n|---------------|---------------------------|\n| `npm run e2e` | Execute end to end tests  |\n\nNote: To make it work behind a proxy, you can add this proxy exception in your terminal  \n`export {no_proxy,NO_PROXY}=\"127.0.0.1,localhost\"`\n\n## Debug with VsCode\n\n[VsCode](https://code.visualstudio.com/) debug configuration is available! In order to use it, you need the extension [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome).\n\nThen set some breakpoints in your application's source code.\n\nFinally from VsCode press **Ctrl+Shift+D** and select **Application Debug** and press **F5**.\n\nPlease note that Hot reload is only available in Renderer process.\n\n## Want to use Angular Material ? Ngx-Bootstrap ?\n\nPlease refer to [HOW_TO file](./HOW_TO.md)\n\n## Branch \u0026 Packages version\n\n- Angular 4 \u0026 Electron 1 : Branch [angular4](https://github.com/maximegris/angular-electron/tree/angular4)\n- Angular 5 \u0026 Electron 1 : Branch [angular5](https://github.com/maximegris/angular-electron/tree/angular5)\n- Angular 6 \u0026 Electron 3 : Branch [angular6](https://github.com/maximegris/angular-electron/tree/angular6)\n- Angular 7 \u0026 Electron 3 : Branch [angular7](https://github.com/maximegris/angular-electron/tree/angular7)\n- Angular 8 \u0026 Electron 7 : Branch [angular8](https://github.com/maximegris/angular-electron/tree/angular8)\n- Angular 9 \u0026 Electron 7 : Branch [angular9](https://github.com/maximegris/angular-electron/tree/angular9)\n- Angular 10 \u0026 Electron 9 : Branch [angular10](https://github.com/maximegris/angular-electron/tree/angular10)\n- Angular 11 \u0026 Electron 12 : Branch [angular11](https://github.com/maximegris/angular-electron/tree/angular11)\n- Angular 12 \u0026 Electron 16 : Branch [angular12](https://github.com/maximegris/angular-electron/tree/angular12)\n- Angular 13 \u0026 Electron 18 : Branch [angular13](https://github.com/maximegris/angular-electron/tree/angular13)\n- Angular 14 \u0026 Electron 21 : Branch [angular14](https://github.com/maximegris/angular-electron/tree/angular14)\n- Angular 15 \u0026 Electron 24 : Branch [angular15](https://github.com/maximegris/angular-electron/tree/angular15)\n- Angular 16 \u0026 Electron 25 : Branch [angular16](https://github.com/maximegris/angular-electron/tree/angular16)\n- Angular 17 \u0026 Electron 30 : (main)\n- \n[maintained-badge]: https://img.shields.io/badge/maintained-yes-brightgreen\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[license]: https://github.com/maximegris/angular-electron/blob/main/LICENSE.md\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-red.svg\n[prs]: http://makeapullrequest.com\n\n[linux-build-badge]: https://github.com/maximegris/angular-electron/workflows/Linux%20Build/badge.svg\n[linux-build]: https://github.com/maximegris/angular-electron/actions?query=workflow%3A%22Linux+Build%22\n[macos-build-badge]: https://github.com/maximegris/angular-electron/workflows/MacOS%20Build/badge.svg\n[macos-build]: https://github.com/maximegris/angular-electron/actions?query=workflow%3A%22MacOS+Build%22\n[windows-build-badge]: https://github.com/maximegris/angular-electron/workflows/Windows%20Build/badge.svg\n[windows-build]: https://github.com/maximegris/angular-electron/actions?query=workflow%3A%22Windows+Build%22\n\n[github-watch-badge]: https://img.shields.io/github/watchers/maximegris/angular-electron.svg?style=social\n[github-watch]: https://github.com/maximegris/angular-electron/watchers\n[github-star-badge]: https://img.shields.io/github/stars/maximegris/angular-electron.svg?style=social\n[github-star]: https://github.com/maximegris/angular-electron/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20angular-electron!%20https://github.com/maximegris/angular-electron%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/maximegris/angular-electron.svg?style=social\n","funding_links":["https://github.com/sponsors/maximegris","https://patreon.com/user?u=37550953","https://issuehunt.io/r/maximegris"],"categories":["TypeScript","Boilerplates","Electron Tools, Libraries, and Frameworks","Tools","Angular"],"sub_categories":["Samples","Tools","Mesh networks","JavaScript Libraries for Machine Learning","Desktop Applications"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximegris%2Fangular-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximegris%2Fangular-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximegris%2Fangular-electron/lists"}