Schlagwort-Archive: webpack

Angular 2, Electron, NodeJS

Currently I’m working on a private project with Angular 2 (v.2.0.0-beta.0 | TypeScript), Electron (Atom Shell) and NodeJS.

I had some issues with Angular 2 and webpack modular bundler.
In my system I have to transcode all the TypeScript code with all the nice features to normal JavaScript-code (ES5).

first issue
  • It took me many hours to get the InterProcess Comunication from the Electron to the NodeJS running. The Problem is that the IPC-module is a native Electron-module and webpack is trying to find it in the node_modules folder.
    StackOverflow issue

Solution: webpack-target-electron-renderer
You have to change/update your webpack config. After that webpack will ignore or find the native Electron-modules.

second issue
  • In Angular 2 you can write components, services, …. and more. I wanted to use a service to get data from one component to another but I never got the data exchanged between them.

Solution: In my case I used the Componenttag „providers“ to create an instance of the declared service but every time you write „providers“ with a service in it, you are creating a new instance of the service and you will never get data from one component to another. You start your app with that

bootstrap(App, ['services']);

since then you have an instance of the provided services. To use them, you only have to import the service and to write in the somponent-constructor

constructor( %varname% : %servicename% )



The combination of Angular 2 (TypeScript), Electron (Atom Shell) and NodeJS is very nice. With that components you are able to build a client application rapidly. My next „nice to have“ is to integrate a CSS-preprocessor (SASS, LASS, …) in my projects to write CSS-code in the ways of a programmer.