Giter VIP home page Giter VIP logo

angular-electron-seed's Introduction

Angular Electron Seed

This seed combines the technologies of Angular (4+) with Electron to create a robust development stack for creating Desktop applications. Leveraging the stock AngularCLI build process, we are able to maintain webpack and stock tooling with minimal tweaking.

Example

Getting Started

Command Description
npm i Install the required dependencies
npm run start Builds the project and opens your app in Electron
npm run start.watch Builds the project and watches for file changes with Angular CLI
npm run watch Runs the custom tooling and syncs the live-sync with the AngularCLI watch task
npm run bundle.mac Bundles your MacOS app into the bundles directory
npm run bundle.windows Bundles your Windows app into the bundles directory
npm run bundle.linux Bundles your Linux app into the bundles directory

Features

  • IPC Protocol - Send messages between Electron and Angular (plays beep when clicking Getting Started)
  • Exposed Electron API via NgxElectronService
  • Bundle your app for Mac, Windows or Linux

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Built with Angular Electron Seed

Contributors

Sean perkins
Sean Perkins

angular-electron-seed's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-electron-seed's Issues

connect ECONNREFUSED 127.0.0.1:30080

I get the following 2 errors when I did npm start (didn't change anything yet):

A JavaScript error occurred in the main process Uncaught Exception: Error: connect ECONNREFUSED 127.0.0.1:30080 at Object.exports._errnoException (util.js:1022:11) at exports._exceptionWithHostPort (util.js:1045:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

A JavaScript error occurred in the main process Uncaught Exception: Error: socket hang up at createHangUpError (_http_client.js:253:15) at Socket.socketCloseListener (_http_client.js:285:23) at emitOne (events.js:101:20) at Socket.emit (eventsjs:188:7) at TCP._handle.close [as _onclose] (net.js:501:12)

Operating system: Debian
Electron: 5.0.4

Publish this awesome utility to NPM

Hi, I landed here because I was looking for an "out-of-the-box" way to quickstart an electron project with angular 4+. This is quite good since it is what I was looking for, thank you.

But I made a search on NPM and couldn't find this, could you please publish this repo as a node package?
It would be great!
Keep the good work, cheers from Costa Rica!

Call me confused...can't get live-reload to work

I'm trying to get live-reload to work so that I can make changes to Angular files and have Electron automatically reload.

In one window I have running npm run start.watch. Whenever I change a file, it goes through the process of rebuilding. However, electron does not reload. I hit CMD+R to reload, and I'm greeted with a white screen.

Please explain to me where I'm failing to implement this right. The documentation is a bit spartan.

MacOS - Error on startup - Error: connect ECONNREFUSED 127.0.0.1:30080

Hi,
I've clone your project, I've executed "npm i" and then "npm run start" but Electron displays the following error message:

A JavaScript error occurred in the main process
Uncaught Exception:
Error: connect ECONNREFUSED 127.0.0.1:30080
at Object.exports._errnoException (util.js:1026:11)
at exports._exceptionWithHostPort (util.js:1049:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1081:14)

Obviously it's trying to call the local Angular App running on port 30080, but I don't know how to start it. Could you please provide this information ?
Another question: how do you suggest to proceed during the development of the Angular components and see the changes in real time inside Elecrton ? Could you provide more information about this ?
Thank you very much, your project is really useful !

Diego

Feature request: separate package.json dependencies

Can you provide a starter with Angular/Electron dependencies as separate folders?
I have seen a demo on 'Pluralsight' that create a demo with Ionic 3/Electron as separate dependencies which reduce the bundle size drastically.

I am trying to implement this but I am getting an error.

Error: connect ECONNREFUSED 127.0.0.1:30080

Just trying to run yarn run start or npm run start (ofc after running npm install), electron boots up but gives the following error:

A JavaScript error occurred in the main process

Uncaught Exception:
Error: connect ECONNREFUSED 127.0.0.1:30080
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1081:14)

PrimeNG support: jQuery is not defined

Hello guys,

I was trying the PrimeNg template in this boilerplate project, but I could not get the jQuery to work, the same is not defined.

Searching in google found a possible solution, disable node integration, setting "BrowserWindow.nodeIntegration" to false.

But, as far as I could tell, this property does not exist when using the main Electron process written in Type Script.

Could someone help me with this?

Thank you everyone for the attention.

Cannot find module 'electron-connect' when running linux bundle

As far as I understand this is a development depedency, and I don't know why the bundle is giving this error when run. The "watch" command does work.

My commands:
npm run build && npm bundle.linux

Full error:

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'electron-connect'
    at Module._resolveFilename (module.js:470:15)
    at Function.Module._resolveFilename ([path]/bundles/demo-linux-x64/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> ([path]/bundles/demo-linux-x64/resources/app/electron-app.js:4:26)
    at Object.<anonymous> ([path]/bundles/demo-linux-x64/resources/app/electron-app.js:52:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
111

Alternative Seed & Inspiration

@sean-perkins First off thank you for this seed, it gave me some inspiration to make a seed of my own that worked with the @angular/cli without hacking around it.

I've started a seed that takes an alternative approach to many of the electron solutions out there. The seed uses gulp like this one, but doesn't require electron-connect and uses the the angular cli features for building and serving. It's still very much in its infancy but so far i have HMR, Live-Reload, and basic launching of the electron app. I proxy-ed the cli services with browserlink through gulp plugins and the electron process is monitored by nodemon for restarting it on changes. There is still a lot to do yet!! Everything is up to date with angular 5.x latest stable cli etc...

You can find the seed here
https://github.com/Kaffiend/electron-angular-ngrx

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.