Mike Tolland

Working with Angular CLI and Electron

When I originally set out to figure out how to integrate Angular 2 and Electron, I researched many different articles and most required you to use webpack regularily instead of the angular cli. I even setup my own electron, webpack, angular 2 setup here. It worked fine but it was overly complex and I really liked the simplicity of the angular cli tool. Most of my team at work was using the angular 2 cli not only to start their projects but also to generate stub files for services and components. Also the ng serve command was much better than I could ever get the webpack-dev-server to work. If you also combine that with the fact that most tutorials and help out on the web about angular 2 expect that you are using the angular cli.

So with all that said I abandoned my electron-angular2-webpack repo and started to think about how to incorporate angular cli and electron. In the end after some trial and error it was fairly simple and I produced a solution that I was really proud of. You can see the repo here, I will talk about how I built it through this post but if you want to just fork it or are interested in how its setup feel free to jump ahead.

Now with all that said here was my initial goals with this project:

Now the first step with all angular cli projects is to run the ng new command. This command creates a basic new angular project with a series of files. It add a bunch of testing files as well but for the purpose of this project I removed all those files. So I removed all references to e2e, jasmine, karma, etc. I removed the ts spec config and all the references in the .angular-cli.json file as well. This gave me a base project without the testing stuff. I think in a future post I will talk about Javascript testing and how horrible it is but that is for a later time. At this point running npm start or ng serve should get you a working site at localhost:4200.

The next step is to get angular 2 material. This is fairly simple and I would follow the guide on angular 2 material getting started. Don’t forget the @angular/cdk package as when I first did this I skipped it thinking it wasn’t important but it ended up making animations not work for some reason. Anyways after you do this throw some code in your src/app/app.component.html file in order to test it. I used the following which I copied from a couple of example apps I was looking at.

Now if you run ng serve you should start to see some material stuff but it will probably look badly formatted. You going to need some css to tighten up its look so go to your site.css and make sure it matches this.

* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

md-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

md-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

The initial import statment will include the indigo pink theme which should be the default. The body tag makes the font default font for the site Roboto and removes any default margin that might be added to your site. The md-card will make it so that its width is 80% of the screen and that text inside is center aligned. The md-toolbar-row will make sure the content inside toolbar have space between them. Finally the done css will align the check box to the bottom right corner.

With these changes you should now have a functioning angular 2 material website. There is still one thing missing though and you might have noticed it in the toolbar. It probably says mood and some random text on the left and right sides of the toolbar. Thats because its missing icon support. If you want to quickly fix it simply add the following to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

This will get the icon font and should render the icons correctly on the page when you use ng serve. Unfortunately for me this was not going to work, I needed offline support because where I deploy my electron app there is no internet access. This is where the documentation on how to do this disappears. I tried searching through google, stack overflow and the material documentation but when it came to offline support it was pretty weak. I saw some people say to download the css and fonts and just statically link them into my app but I hated that approach. I wanted an approach where I didn’t have to commit anything into my app and relied on npm. Luckily there is an material icon npm package. Unfortunately it doesn’t really tell you how to use the package with your app. I originally tried to import the woff, eot, and other font files directly and add my own css to import them but this ultimately failed. After looking through the npm package I found that there was already a material css file in the package that I could link. I tried to link to it directly via the css file but that failed as well. In the end I added that css file to the .angular-cli.json config file in the styles array like so:

"styles": [
        "styles.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ],

This worked and when I started up ng serve it was all working. This ultimately became version 0.1.0 of my project and you can view that here.

In my next article I will talk about how I integrated electron.

Share this:
© 2016 Michael Tolland. All rights reserved.