Category Archives: Angular 2

The Bleeding Edge Hurts a Bit

So today’s post was going to be about how I built a MeteorJS/Angular 2 app to Android and released it on the play store. Instead I write a reminder/warning to all who like to develop in experimental technologies.

What Happened to My App?

The day started brightly. I was working away, being more productive than I had in a while. Getting things done. Cleaned up some code, got some things working that had not been and decided to try building my app for an Android device.

I plugged in an old android phone to my computer and ran:

meteor add-platform android
meteor run android-device

No errors showed up in the compile but the only thing showing on the phone was a blank white screen.


Googling the issue brought me to this post. I am not the first to run into this issue. After reading through the thread, it seemed as if the issue might be fixed in a newer version of some of the packages that I was using.

So I ran meteor update and saw that indeed there were new versions of some of the core Angular 2 packages that I was using. Some of them I could only update by removing them first and then reinstalling them by the specific version.

Alas, this did not fix my problem.

In the course of research, I found another issue posting that is only 19 days old and is still open (as of this writing).

There are a few more experimental things to try but if they don’t work, looks like a few more days of work rewriting this to something more stable and tested.

Moral of the Story

If you are planning on releasing something to the wild, you should probably not use a technology that is in beta unless you are the one developing it and can fix your own issues.

Since the main purpose of this particular game was to learn a bit about releasing an app to the Android/Google Play Store, I will probably rewrite it into either basic javascript using Meteor or figure out how to write it into Angular 1 with Meteor.

Make games, have fun, and try not to cut yourself on the bleeding edge.


I finally got the game to build to Android properly (around 1:00 A.M. after undoing all the other experiments I had tried then removing the login packages that were being used. Technically it can be played without logging in currently, but there is some additional functionality that tracks some statistics and scoring based on the user meaning I still need to figure out how to handle users. But it builds. Huzzah!

Learning Angular 2 and Typescript – Part 1

Out of a desire to learn Angular and building on what I have learned about MeteorJS, my current game is using Angular 2 and Meteor together. It does not get fancy and utilize all of the special features that these frameworks have to offer, but it is a good learning project.

So Popular

If you are new to programming or to web programming, a few years ago Google released an experimental framework called AngularJS that has become quite popular. It has become widespread enough that it is hard to ignore.

Currently, there is a new version of AngularJS that is in the works, simply called Angular 2. This caused a bit of stir since it is fairly different from Angular 1 and those who invested heavily in 1 will have to do a good bit of rewriting to migrate to 2.

Meteor, the Javascript framework I have been learning that builds to mobile devices easily, has been integrated with Angular 1 through the Angular-Meteor Project and integration with Angular 2 is in beta.

Some Angular 2 Basic Concepts


As far as I can tell, Angular is about creating “Components” which I have come to think of as Lego-like pieces that you use to build your website or app.

For example, in the game I am building each section has a list of choices available. So I built a ChoiceList component and simply stick it into the page using an html tag that I assign to it like this:

This is a story with choices

And the <choice-list> tag will render the template of the ChoiceList component which gets a list of choices from the database and builds a list of stylized divs that look like buttons.

Data Binding

There is a lot of phrases that get thrown around when dealing with angular and one of them is “2 way data binding”.

This is a short way of saying you can tie an input directly to a component property or variable and when the input changes it immediately updates the property of the component. That is the first direction, from the View to the Controller. But then you can have a separate View element that uses the property that is getting changed, and it is updated automatically whenever the component property is changed.

If you were writing regular javascript you would need to add listeners and events to create this kind of behavior, but in Angular 2 it is simply using a banana in a box “[()]” (yes that is what it’s called).

A practical example of this would be a mortgage calculator that had input fields for a price, a down payment, and a interest rate and calculated a monthly payment. 2 way data binding would let you update the payment automatically anytime one of the 3 input fields changed. It would send the value back to the controller and then update the view accordingly.

With Meteor, we actually get “3 way data binding” because it has reactivity built in and can update the Model layer and have that reactively percolate up to the View and from the View down to the database (Mongo in this case).


Angular 2 is trying to use a bunch of features that are coming for Javascript, but have not quite arrived yet. Typescript is one of the current recommended solutions to this.

Developed as an open source project by Microsoft, Typescript is a language that compiles to ES5, the current accepted Javascript standard that most browsers work with. It has really similar syntax to Javascript and is easy to pick up and learn.

Some of the features that I have found useful so far are the ability to check type parameters and to define your own Interfaces which describe what you are looking for in an object. So if you have an interface that looks like:

interface Choice {
page_name: string;
result_page: string;

You can use it to set variables to a Choice type so that they will need to be objects with a page_name property that is a string and a result_page property that is a string.

Nothing New

Although most of what I said here has been said better or clearer in other places about Angular 2 and Typescript, writing about it allows me get a better understand what exactly is going on when I write the Typescript to make a new Angular 2 component. I plan on getting into some more specific parts of Angular later on. For now, just a little overview and what I have found interesting.

If you haven’t looked into it yet, try out Angular.