Archive for: November, 2016

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.

 

Where the fuck is LocalStorage in AngularJS 2?!

So I’m a new migrator from AngularJS1/Ionic1 to AngularJS2/Ionic 2.

Already I’m working on a new production project while learning on the job, and so far so good, until I ran into my post login processes, where I needed to store the logged in user info in the app, which traditionally would be done with LocalStorage, built in, in Ionic Framework 1.

To my dismay, there are ZERO docs on localStorage in AngularJS 2/Ionic Framework 1, nor the built in Storage service it provides. I managed to only learn about Storage-LocalStorage from a Udemy tutorial and searches, and turns out the way to import the service was wrong in most of the results.

The above syntax will result in an error that says:

Turns out, LocalStorage was removed entirely in Ionic2, and Storage was separated away from the core ionic-angular package, into a separate package called ionic/storage.

One has to install the @ionic/storage package first, by running:

Followed by importing the service in Ionic Framework 2 final, is this:

Remember to do this both in your component and app.module.ts. Remember to also declare the provider in your app.module.ts as so:

So to set and get data from Storage, simply do this:

Set

Get

Clear

 

You’re welcome.

 

 

How to install and setup AngularJS 2 with SASS/SCSS and Bootstrap boilerplate easily

Hooray, AngularJS2 is officially released, which means it will officially be the tool of choice to build websites for me from now on.

Infact, I already started working on it.

Unfortunately, after many tries with various boilerplates/methods, they were all super complicated and more importantly, failed at some point of set up.

Thankfully, I found a easy and quite fool-proof way to automatically generate an angularJS2 seed project with best practises and testing all built in, SCSS/SASS support and installing bootstrap in only a few steps.

Angular-CI.

It’s funny why angular-ci wasn’t really advertised much in the angularJS docs, I only found out about it from Maximilian Schwarzmüller‘s udemy angularjs2 course.

Anyway, refer to https://github.com/angular/angular-cli to get started with angular-ci.

You can also use angular-ci to generate directives, components, what-nots.