Angular 2 native desktop app (without Electron) example

Well you have to have a wrapper of some sort. There is not way that angular 2 by itself can create desktop applications. Angular is purely web technology and so works with the browser. Frameworks like electron create a browser wrapper to trick a user into thinking that the application is not a browser like chrome.

Having said that to completely answer your question, you can create an angular 2 application without electron using asp core and the Universal Windows Platform Which allows you to develop in javascript,html and css, which is exactly what angular is. However you are then locked into .net and only windows desktops applications. Which , if you are only developing for windows then this is a much better solution then electron IMHO.

Also note you will probably be writing some C# configuration.

There are also alternatives to electron which pretty much do the same thing ( browser wrapper)

http://appjs.com/

https://nwjs.io/


This is confusing, but there is no way to create a native desktop app with Angular2 only. Maybe this is the plan for the future, but it is not possible yet. But Angular2 is working quite well with Electron! I wrote a blog about it, unfortunately it is in German only :( But maybe you can simply translate it with the Google Translator: https://medium.com/@baerree/ich-packe-meine-koffer-angular-cli-electron-ii-28644342b956

Basically, you need to run the steps described here: http://www.blog.bdauria.com/?p=806

After building the electron skeleton around your app and did the Angular2 configuration steps described in the link, there is one thing to do:

The electron scope is missing inside your Angular2 scope. That means, if you want to access it you need to pipe electron inside Angular2. This is done by adding the following to your index.html (beware, this is not a clean solution):

 <script>
  var electron = require('electron');
 </script>

after you did this, you need to tell typescript, that there is a electron variable now, by adding this to your typescript.d.ts:

declare var electron: any;

you can access electron inside Angular2 now by calling:

var app = electron.remote.app;

with the app variable you have full access to electron and your electron.js file. E.g. you could do things like that:

this.title = app.getAppPath();

I hope this helped at least a bit :)

Cheers