Page 72 - MSDN Magazine, August 2017

The Working Programmer TED NEWARD How To Be MEAN: Up-Angular-izing
Welcome back again, MEANers.
It’s been two years since I started this particular series on the
MEAN (Mongo, Express, Angular, Node) stack. And, as was bound to happen, various parts of the MEAN stack have evolved since the series started. Most of these updates (specifically the Node, Express and Mongo versions) are transparent, and adopting them is a non- event: Just upgrade the underlying bits and everything works.
But Angular upgrades have been of some concern to the Web front-end world for a while, particularly because the substantive changes between AngularJS (v1) and Angular (v2 and beyond) cre- ated some serious backward-compatibility issues. (I use the term “backward compatibility” loosely here, because the backward- compatibility story for v1 to v2 was essentially, “Rewrite the whole thing—trust us, it’ll be great!”) Thus, it was with some amount of consternation that the Angular world was watching for the first major update to Angular, and when that update was announced to be a major version enhancement, anxiety mounted.
Turns out, while we were busy writing the front end of the sample application, the Angular team did what they were supposed to do— release a new version of Angular into the world. That means it’s time to take a moment, bite the bullet, and upgrade the application to the new version of Angular: v4. (The Angular team decided to skip 3 and move straight to 4.) Spoiler alert: This turns out to be far, far less painful than people imagined it might be, and offers a lot of hope regarding future Angular updates—which is good because the Angular team has promised that they’re going to release cadence much more in line with traditional open source projects. Which means, bluntly, a lot of small, incremental upgrades released much more quickly (every 6 months) than what’s been the norm so far.
Upgrading Angular
Fundamentally, upgrading to Angular 4 means using the Node Package Manager (npm) to update the npm packages in use to the latest versions. This takes the form of the too-familiar “npm install” command, using a version tag (“@latest”) for each pack- age and the “--save" argument to capture the latest version into the application’s package.json file. For those running on a *nix system (Linux or macOS, typically), the command takes the following form, all of which should be typed on one line:
npm install @angular/{common,compiler,compiler- cli,core,forms,http,platform-browser,platform-browser-dynamic,platform- server,router,animations}@latest typescript@latest --save
The *nix command shells allow for the various packages to be captured under the “{“/”}” pairs, even though technically each one
is named “@angular/common,” “@angular/compiler” and so on. For those of you on Windows, you get this slightly longer version:
npm install @angular/common@latest @angular/compiler@latest @angular/ compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/ http@latest @angular/platform-browser@latest @angular/platform-browser- dynamic@latest @angular/platform-server@latest @angular/router@latest @ angular/animations@latest typescript@latest --save
Once the “npm install” is finished executing, for all intents and purposes the upgrade is done. Simply run the application using “ng serve” again, and everything should be back to running status.
Angular 2-to-4 Pain Points
The Angular team has admitted that it’s not always a smooth transition— however, the release notes take care to point out that most of the pain (apparently) is localized to the use of animations, which is a subject I haven’t explored yet. Specifically, the team removed an- imations from @angular/core, and dropped them into its own Node package, @angular/animations (which you can see in the previous “npm install” command). That way, if the application doesn’t use animations, it doesn’t have to carry along the code of animations in the core package.
Fundamentally, upgrading to Angular 4 means using the Node Package Manager (npm) to update the npm packages in use to the latest versions.
Angular 4 New Features
The Angular 4 release notes carry the full weight of the story, but there are a few things in particular worth calling out.
First, the Angular team is focused on reducing the size/weight footprint of the Angular libraries. This is good for obvious reasons, particularly for those users who aren’t on high-speed fiber connec- tions with the rest of the world. The Angular team says they’re not done, either, so expect that each successive Angular release will seek to decrease its footprint even further.
In the same spirit, the Angular team has reduced the overall size of the generated codebehind view templates, up to 60 percent.
66 msdn magazine