Tag Archives: ionic

SASS not working after updating NPM or Gulp

Recently ran into a fucked up issue, where a new collaborator on my project cloned the project onto their computer, ran npm install to install all dependencies, only to find that sass was not completing in gulp.

The SASS processor actually started, but simply wouldn’t finish.

SASS not running

After much troubleshooting, the conclusion was due to some dependency conflict.

After another round of hair pulling troubleshooting, I received the much dreaded: libsass bindings not found. Try reinstalling node-sass error.

In the past, reinstalling node-sass would have solved it, but turns out the problem was with the current version of Ionic, it only supported a specific version of gulp-sass.

If I ran npm ls node-sass

I would see:

The solution

Edit package.json, and change all includes of gulp-sass to version ^2.0.4

Re-install the dependency with npm

And running gulp now should have no errors, and correctly finish processing the sass method.

You’re welcome.

 

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 @ https://github.com/ocombe/ng2-translate

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.

app.ts

 

startup.ts

 

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:

/Listing/
listing.ts
listing.html
listing.scss

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.