Archive for: June, 2016

Angular Translate on Angular JS 2 and Ionic Framework 2

Yes, finally I made it work.

What were the main issues?

  1. I had a lot of peer dependencies errors while installing ng2-translate. Apparently, I can ignore them all.
  2. The right dependencies need to be loaded on your app.ts and page.ts for the plugin to work.

Things to take note of, we load the bulk of the initialisation and config of the ng2-translate plugin in the bootstrap file, aka the app.ts, which serves as the root of your app. In Ionic1, this would be the app.js

This file serves as the base structure upon which you will load the other components upon.

Remember to call the translate service in the constructor! I suppose I am only having this problem now because I am new to AngularJS 2. In future, this should come in as second nature.

Here are the two files that are needed to make this Ionic Framework 2 implementation of ng2-translate run.

Many thanks to Olivier Combe for creating the Angular JS 2 port @

But seriously, the code examples needed to be clearer and more ‘plug and play’.

It was missing import {Http} from '@angular/http'; in the bootstrap file, and it wasn’t clear how the bootstrap and the component files should look like, once installed correctly. But anyway, here you go.





Using SCSS/SASS with AngularJS2 components

So previously, I’ve talked about how in AngularJS 2, you can include individual styles/stylesheets to be used exclusively by the respective component.

Problem is, this only natively supports CSS, which is quite a bummer.

From what I could see, there are two ways to go about this:

  1. Compile all SCSS files in the component folders, and concatenate them into one app.css
    This would mean that you will have to forego the encapsulation feature though, as there will no way for the components to know what styles are theirs.
  2. Compile all SCSS files in the component folders, save CSS files in the respective component folders, and load those generated css files instead.
    This seems to me, the more logical approach as the intended behaviour will be retained.
    Problem is, this means that your task runner will potentially be watching 100 scss files in 100 folders (or more) and compiling them. Maybe this isn’t such a big deal, I don’t know yet.
  3. Someone has also written about this at
    Apparently there is a solution using the Webpack task runner. However, to me, this seems to be adding a lot of bulk to the project, especially when I am already well-versed with Gulp/Grunt, and Ionic Framework already have their SCSS compilers in place.
    If I am not mistaken, going this route will allow your angularJS 2 components to load the SCSS files directly. The runner will process the SCSS files upon request, and return them as CSS strings.

Notable Issues

It’s worth noting that having multiple independent scss files are neat and all, however, they actually add overhead to the load times. Every thing you include, be it a view template or a scss file, is an additional http request.

That’s why it is recommended to embed your html template within your component’s Typescript file using template: <h1>Hello</h1>  if the code is small and lean (which is the goal).

Styles-wise, it would be perfect if we could simply enter SCSS code into the styles attribute, and the app would be able to compile the resulting scss into css.

That would be the best solution in my opinion, and we can get rid of all these processes, although there will be similar processes happening in the background, but it will feel seamless.


Strategy for migrating from Hybrid apps to Native

So I’ve decided on a strategy to migrate from programming for hybrid, web-based apps using AngularJS 1 and Ionic Framework 1, to eventually, native Swift 3.

The route will be:

AngularJS 2 -> Ionic Framework 2 -> Swift 3

After getting my hands dirty for a few days in AngularJS 2 and Ionic Framework 2, I realised that the new way of doing things in both frameworks are shifting very closely to the paradigm of Native Apps.

Everything is not kept very modular, in components. In fact, i think that after we’ve mastered AngularJS 2, it will probably be a piece of cake to learn ReactJS too, because there are many similarities.

I can already see once we’ve migrated our AngularJS1 app to 2, that the code will be immensely more maintainable, more re-usable.

How so you ask?

First of all, AngularJS 2 adopts a Single Responsibility Principle, throughout the app. This means that every function, service, component (controller) should have one use. These individual components can then be combined in a view to form a page/screen/UI.

This has always been a rising and recommended principle for all programming languages, and is now becoming the requirement.

More interestingly in AngularJS2, is not only are the programming logic Single Responsibility, even the assets are.

We now work with a folder structure like so:


The controller, view and scss are all contained in the same component folder! An even cooler thing is that when you declare the style/stylesheet for use in the controller, that style/stylesheet ONLY applies to that component! This is done through encapsulation, whereby the component will render a dynamic class every time, and apply the styles only to that class. This is a huge paradigm change!

Doing things this way also makes testing much more efficient and straight forward.

If you need a team member to work on the listing page, you simply point them to the listing page. Chances of them fucking up the rest of the site accidentally is minimal, since the component they are working with has a single responsibility.

Native apps, ReactJS also follow the same principles, which make AngularJS 2 definitely the way to go for the future.

Setting up the environment for AngularJS 2

First things first, when setting up angularJS 2 on OSX for the first time, you need to install two things:

  1. Typescript
  2. Typings

Install Typescript by running
sudo npm install -g typescript

Install Typings by running
sudo npm install -g typings

What is Typings you ask?

Typings is a module for Typescript that lets you use external javascript plugins, ‘natively’ in Typescript. Doing so will make them fully compatible.

About FLINT Creative Blog

Starting this blog as an outlet for frustration and also to keep notes about my design and web/app development business @ FLINT Creative

My name is Fred Lin, Singaporean. Amongst several other professional roles, in this context, I am digital media expert, UI/UX designer and web/app developer.

Largely self-taught, I have designed and built over 100 websites, from PSD mockups to HTML/CSS, from jQuery to AngularJS, from WordPress to Ionic Framework, etc.

I started FLINT Creative in Shanghai in 2013, and have continuously serviced a good number of clients here, more noteworthy ones are the people at Avazu Holding where I handled all of their platform’s UI/UX design and development, as well as DiningCity Asia, where I also helped them design and build their website and website.

Ever since 2015, I started working on building apps as well, because that’s the new trend in the industry.

Unfortunately, technology was really getting ahead of my knowledge, and I had to scramble my ass to learn new stuff like angularJS, ionic framework, gulp, grunt, etc.

In 2016, I realised this shit I just learnt was getting replaced. In fact, nearly ALL of the shit I had learnt was getting replaced.

AngularJS1 was going to AngularJS2.

Ionic Framework 1 was also following suit.

I was contemplating learning ReactJS with React Native, but then decided to drop the idea to instead learn Swift 3 to code native apps.

Therefore, I needed this blog to record down my observations, notes, migration differences, etc.

Maybe, just maybe you might find some useful information as well.