Angular-cli: Electron support?

[chadbr]

Are there any plans to support Electron building, debugging, etc. through the CLI? Or enable enough plugin support to have it done by an external team?

thanks, Chad

[michaeljota]

Electron is no more than a platform to desktops applications. You could just develop your application as is, and event create services that would made the communication with Electron, and then deploy the app to the Electron platform.

I have a couple of example apps with Electron and Angular

• Pomodoro
• Starter

Either use the CLI, but you might find enough to start yourself from this.

[chadbr]

@michaeljota thanks for the reply --

I understand 'it can be done' -- what I was hoping for is a more 'CLI native' experience. I use the CLI specifically so I don't have to worry about all the bundling, packaging, etc. and benefit from all the great work they do.

I've tried getting electron working with CLI before and the only thing I could get working was to eject the config... There are a few examples here and there that 'get it working' - but they're not what I would call a good CLI experience (i.e. heavily modified).

I was hoping to maintain the CLI workflows for dev, CI, etc. and be able to target a mix of web & electron.

There are several groups who would like to get this working -- ex. https://github.com/electron-userland/electron-forge/issues/262

thanks much!

[michaeljota]

There are several platforms that Angular could be integrate with, Electron is just one of them. The CLI is great to web platform development, but I don't think this should be extensible to every posible scenario.

Though, with a plugin to target different platforms this could work, but not with the CLI per se.

[deebloo]

@chadbr @michaeljota perhaps a new section in the wiki stories on how this integration would look would be helpful

[michaeljota]

@deebloo I just wrote a story about the basic integration with Electron, and I'm trying to push it, but seems like I lack for proper permissions.

EDIT: You can see, more or less, the story here: Integration an Angular CLI application with Electron

I just post it there so you could review it before the publish.

[Kaffiend]

I have started an electron seed that is CLI friendly, no messy ejection of the underlying webpack. Everything is proxy-ed with the CLI services for serving and building. Its still very much in its infancy but so far i have basic building & launching the electron app, Launching with Live-Reload, and HMR binding.

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

[pboymt]

@michaeljota The story Integration an Angular CLI application with Electron maybe unsupport node/electron native module unless change the angular cli webpack config in node_modules.

[michaeljota]

@pboymt Thank you. I will investigate about it and will update it, or make another story if the process is long enough.

[chadbr]

Thanks for the pointers!

@hansl do you see this ever being a priority for the project? Or should I go ahead and close it?

Thanks! Chad

[Kaffiend]

So far the only way i can get native modules to work properly and set the target is to eject the project and retain just generation capabilities. I've made progress on this front with the above mentioned seed. I plan to update this weekend, i'm still retaining HMR workflow, live reload etc. But until we get the means to change the target and include externals without ejection, I see no other way unfortunately.

[ruipimentel]

I just found out about ng eject and was able to use it (kinda) successfully to start a new Angular 5.2.2 application within an Electron 1.7.11 project, by following this answer on Stack Overflow. One of the steps, besides electron's package and it's @types, is the "target" setting on webpack-config.js:

module.exports = {
  "target": "electron-renderer", // this line should be added after "ng eject".
  "resolve": {

However, quite unfortunately, this method implies on not being able to use Angular's (brilliantly pre-configured) ng serve, ng build, ng test and ng e2e commands anymore:

For instance, besides npm start worked surprisingly good together with Electron's electron ., npm test wasn't even able to compile.

Question: wouldn't it be possible to include the "target" setting in .angular-cli.json itself as a (hopefully not so distant) future feature?

[Kaffiend]

@ruipimentel it is also possible to fix the workflow of HMR and live reload once you eject, but it takes some configuration with the ejected webpack.config i touched a little on this subject here in #7159 I've also been working on a starter seed that takes care of all this i hope to get it updated with everything i figured out on a professional project using it.

[ruipimentel]

Thank you, @Kaffiend, unfortunately I'm not acquainted with Webpack, so I think I might just go on without unit testing for now.

This is really a very small project that I did not expect any trouble to implement, but I'm hoping @angular/cli will support the "target" Webpack conf soon ;)

Thank you!

[chadbr]

Some other recent "solutions" for reference...

https://github.com/maximegris/angular-electron
https://github.com/Kaffiend/electron-angular-ngrx

[ruipimentel]

Thanks, @chadbr! I was looking for other solutions just now.

As it seems by this Pull Request (#7435), the "target" solution was already proposed by someone but rejected by Angular's team :/

[chadbr]

@ruipimentel yes - a bit frustrating...

[Kaffiend]

Indeed it is, frustrating. When your official website boasts One framework. Mobile & Desktop. and the primary official assisted development tool shuns one of the largest most successful means of a desktop application with said library, I find it VERY frustrating.

[michaeljota]

Update here: I just able to integrate an Angular application made with Angular-CLI and Electron with IPC in the rendering side. I did not have eject the application, and I don't think I will. I'll soon post the story in dev.to. Thanks you.

PS: Also, I added SQLite native modules in Electron without any issue.

[Kaffiend]

@michaeljota I am extremely interested in how this was accomplished 😄

[ruipimentel]

@michaeljota that's great news. I'm looking forward to reading your story.

[michaeljota]

Here is the story:
https://dev.to/michaeljota/integrating-an-angular-cli-application-with-electron---the-ipc-4m18
I hope I understood everything correctly and also explain it properly. It is in deed very complex to understand, but at the end is about thinking in plain simple Javascript.

Thanks to all the people that are following this thread, I'd learned a lot these days about techs that I love.

[chadbr]

I just watched the v6 news -- good stuff.

https://www.youtube.com/watch?v=LMhvNTgNM9o

At least this should enable some electron integration...

[ruipimentel]

@chadbr you mean the new ng add command?

[chadbr]

@ruipimentel I'm thinking mainly of the schematic support -- but all the new extensibility functions will help integrate with some electron packages (I'm thinking of electron-forge)

[michaeljota]

If you are interested and have patience,the guys of xplat are working in schematics for Electron projects.

[chadbr]

I’m in no hurry— in fact I’m not going to do anything without tooling. Life is too short.

You have a link?

[michaeljota]

https://nstudio.io/xplat/

[dashkan]

All,

I spent a couple of days reviewing the cli codebase. The build system is very extensible. I ended up creating a new npm package named ng-electron-devkit that extends angular 6 build system to support electron-renderer. My goal is to add support for electron main process and packaging electron assets in the build pipeline in future updates.

This is not a hack to the CLI. You can target both electron-renderer and the browser and have completely different build settings!

Check it out

[SvenBudak]

@dashkan Can you create please schematics for this packages and make ng add available?

[dgp1130]

This came up in a recent CLI meeting. The Angular CLI has a pretty flexible builder and schematics API to support use cases like Electron integration. Historically, our officially supported builders and schematics have been focused on the primary Angular use cases in web browsers. We don't have any official builders or schematics for Electron simply to reduce our own scope and minimize the maintenance burden.

Since builders and schematics are public APIs, the Angular CLI itself doesn't really _need_ to provide direct support for anything Electron requires. It is much more scalable for other individuals or teams who are more knowledgeable and invested in the Electron use case to maintain the integration between Electron and Angular. Many such packages exist and several have been suggested in this thread. These tools can serve common Electron use cases just as well as the Angular team could. They also likely have more familiarity with Electron itself than our team does and can produce a better quality system that we would be able to.

For these reasons, we aren't planning on introducing official Electron support into the CLI or our builders/schematics.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}