← BACK

Components migration started

— 2 min read

Another week finished. Exams limited my progress this week, but the project still advanced significantly. Four key accomplishments:

  1. Fixed the build process for production.
  2. Added test runner.
  3. Migrated the first component to Angular 2.
  4. Added the first test for a migrated component.

Fixing the build process

Last week the development environment was ready, and presumably the distribution environment too. But throughout the week, I noticed the distributed build caused grid element issues inside the video chat room. After testing various Webpack configurations, I traced the problems to the uglify process.

The issue involved the video room's grid layout system, implemented with angular-gridster. The problem could stem from angular-gridster's styles or the JavaScript module. First, I tried importing the library's CSS directly without Webpack. That failed. The solution: use the source version instead of the minified version in vendors.ts.

Strange, since source and minified versions should behave identically. Regardless, the source version fixes the issue, and Webpack minifies all code anyway, including vendor.ts.

Adding test runner

Easier than expected. I used angular2-webpack-starter from @AngularClass as inspiration. After adapting their webpack.test.js and karma.conf.js files with minor changes, everything worked. Open source at its best: Don't Repeat Yourself.

Migrating the first component

I had awaited this moment since submitting my GSoC proposal. I started with the simplest component in Jangouts: the footer. It displays only a SUSE link and the Jangouts version.

In the old Jangouts (pre-migration), the footer consisted of a simple Angular 1 directive with a template and a jade template. Gulp rendered it, injecting the current version.

The new footer remains simple: a TypeScript file (component definition with an empty class) and an Angular 2 template. The key difference: nothing modifies the template to inject the version. Instead, Webpack's DefinePlugin adds the version as a global constant at build time, reading from package.json.

Two benefits: the footer is now a pure Angular component, and it's easier to test.

Adding tests

Adding tests throughout the platform is essential during the Angular 2 migration. The new footer component has its own tests. They simply verify that the version variable is defined correctly. But these tests serve a second purpose: they confirm the test runner and coverage reporter work correctly.