• info@happli.be

Category ArchiveAngular

Angular 2 – ngx-datatable – ViewEncapsulation

To me, switching from AngularJS to Angular 2 is not as simple as one would think.

It’s still a bit unclear to me as how webpack gathers every dependency. I learn a bit more about it every time I code in Angular. Last challenge I faced was integrating a datatable component, namely ngx-datatable ( and check out their demo), in an Electron App (built using Angular 2 for a customer).

I’ve tried first adding the required CSS to the webpack.config.js class (I had to eject the config and now I build my app using “npm run…”). No luck.
I then managed to pack everything in the generated bundles by including the relevant styleUrls in my app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
     "../../node_modules/@swimlane/ngx-datatable/release/index.css", 
      "../../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
      "../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
    ],
  })

With these styles referenced, everything got bundled (you can check that with the developers tools when your app is started). Still I couldn’t get the styles to apply in one of the components (app.clients.ts) of my app.

It’s because of the view encapsulation. For more info, read https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components and https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html.

By overwriting the default view encapsulation, styles get applied globaly. So, the styles referenced in app.component.ts are applied to the app’s other components (e.g. app.clients.ts mentioned earlier). The snippet below shows the option usage.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
     "../../node_modules/@swimlane/ngx-datatable/release/index.css", 
      "../../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
      "../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
    ],
   encapsulation: ViewEncapsulation.None
  })

After that, the table styles were applied to the ngx-datatable used in the app.clients.ts component.

Adding Android platform to an existing Cordova app

Today, I tried adding a platform to an existing cordova app, which used to work under iOS  was developed on a Macbook Pro. This post lists the things I had to do in order to get it working and the bumps I hit.

Setup the environment

You have to follow the Android platform guide. It’s very well explained and easy to follow. I found it pretty annoying that I’ve had lots of timeouts during the download of the several packages (through the SDK manager). Just keep on trying and you’ll end up with a working environment.

I’ve had another problem when I tried to run the emulator. I was told that Intel HAXM wasn’t installed, so I installed it.

But I couldn’t get the emulator running, I didn’t have much info through the avd manager, so I created a blank project in Android Studio, then I tried to run it in the emulator. And then I was able to read more info about the problem:

Failed to sync vcpu reg.

I was just one google search away from getting it running This SO post helped me. This message seemed to be in relation with the VirtualBox that was running on my Mac at the same time. Shutting down the VirtualBox VM allowed me to get the Android emulator running.

Add the Android platform to the cordova project

cordova platform add android.

So far so good, but when trying to compile the app like below, I had a problem.

cordova build android

I was told that

Screen Shot 2015-09-28 at 22.28.33

Multiple dex files define Landroid/support/annotation/AnimRes;

I found the solution in this post. I simply had to remove the android v4 support from my project’s plugins. I don’t know how this one got there.

Debug the project

Once able to build the project and to make it run, I needed a way to debug it. Just launch chrome and type chrome://inspect/#devices in the address bar (the app must be running first).

Conclusion

It took me less than 2 hours to make my project run on Android. Most of that time was linked to the setup of the environment.  So I’m still convinced that cordova was the right choice to build this cross-platform mobile app.

Migrating a Phonegap app to iOS 9

I installed the iOS 9 update as soon as Apple offered me to and … what a journey! The phone update process was smooth, as was installing the latest version of XCode (7).

But I’ve lost a lot of time making my phonegap app work again on iOS 9. Here’s a note on the things I’ve lost a lot of time on.

Not installing OS X El Capitan

Not installing OS X El Capitan on my Mac. It made the debugging experience awful. I couldn’t get anything written to Safari Web Inspector. Installing OS X El Capitan made it ok again.

App not initializing properly

Not having any clue why my Angular app wasn’t initializing properly. I first thought that I had the window.location bug which you can read about on the web: http://stackoverflow.com/questions/32719631/how-to-fix-window-location-issue-in-ios9-uiwebview. I read that Angular had to be fixed, that there was a patch out there and that the patch was included in AngularJS 1.4.6 => Had to migrate my angular components (cookies, route, google-maps) to that version. Still I had no result. ng-view not showing and nothing written on Web Inspector console. I’ve had to make two pages: one index.html (loading cordova) and a second one app.html (angular app). And by doing that I was able to get all the errors written to the console and could solve them one by one.

HTTP Request headers problems

I’ve had this problem as well with my services adding authentication headers to their http requests.

Apache hosting

I also had a web ui hosted on my Mac OS dev machine, under Apache, which I needed to use because it’s the “admin way” to the system’s data. It used to run under Yosemite, but didn’t any longer after El Capitan upgrade. I guess Apache got upgraded as well. I had to re-check all that config and was helped by this post. And indeed I think some of my previous customizations to Apache config files had been discarded by the upgrade process.