Menu

Using Nrwl/Nx to Upgrade You AngularJS Applications to Angular

November 4th, 2017

  • downgradeModuleNow let’s say we want to use downgradeModule for our hybrid app.We can set it up by running ng generate downgrade-module tusk-desk, where tusk-desk is the name of the AngularJS module.
  • We will end up seeing something like this:update apps/new-tusk-desk/src/main.ts (956 bytes)update (370 bytes)update package.json (1757 bytes)Let’s look at each of the affected files.package.jsonSimilar to the previous schematic, downgrade-module updated package.json to add the @angular/upgrade and AngularJS packages.app.module.tsSimilar to upgrade-module, this schematic rewrote AppModule not to bootstrap AppComponent.
  • All the bootstrapping logic has been moved to main.ts.main.tsThere is a lot to unpack here.First, we are importing the AngularJS and the existing tusk-desk application.
  • For instance, if AngularJS is already present on the page, we can remove import * as angular from angular.Second, we are converting AppModule into an AngularJS module by using downgradeModule.Next, we are downgrading AppComponent.And, finally, we are bootstrapping the existing tusk-desk application with the downgraded module.Running the AppIf we run npm…
  • This means that we can upgrade an AngularJS component and use it inside AppComponent.

Many organizations have large AngularJS 1.x applications deployed to production. These applications may be built by multiple teams from different lines of business. They may use different routers and…

Many organizations have large AngularJS 1.x applications deployed to production. These applications may be built by multiple teams from different lines of business. They may use different routers and state management strategies. Rewriting such applications all at once, or big bang migrations, is not just impractical, it is often impossible, and mainly for business reasons. We need to be able to upgrade gradually.

To upgrade an AngularJS 1.x application to Angular gradually, we need to bootstrap it in a hybrid mode, where we can mix and match AngularJS and Angular components and services. Doing this right is nuanced, so a lot of folks get frustrated with it.

At Nrwl, after helping many teams set it up, we created a few generators to make this process easier. We open sourced them as part of Nrwl Nx a few weeks ago. Using these generators we can set up a hybrid application in seconds.

Some folks value the dev ergonomics and the flexibility of the upgrade process more than the performance of the hybrid applications. Others value the performance. That’s why there are two ways to bootstrap a hybrid application.

UpgradeModule bootstraps both the AngularJS and Angular frameworks in the Angular zone and wires up the two change detection systems, so it feels like we are running one application. When using UpgradeModule, we always start with an Angular application, which “contains” the AngularJS application, hence the name UpgradeModule — we upgrade the AngularJS application.

Regardless…

Using Nrwl/Nx to Upgrade You AngularJS Applications to Angular