Upgrading Angular Applications: Upgrade Shell
Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection, forms, and router modules.
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 do gradually, and this is what this series of articles is about.
In this article we will look at the strategy used in most upgrade projects called “Upgrade Shell”.
Read the Series
This is the second post in the Upgrading Angular Applications series.
Upgrade Shell Strategy
When applying the Upgrade Shell strategy, we take an AngularJS application, and replace its root component with a new Angular component. If the application does not have a root component, we introduce one.
Implementation
Let’s look at the simplest way to implement this strategy.
We start with our existing AngularJS application defined and bootstrapped as follows:
First, we remove the bootstrap call.
Then we define a root component rendering a single element with the ng-view class applied.
Next, We downgrade it and register with the AngularJS module.
Next, we define an Angular module importing UpgradeModule.
We use the injected UpgradeModule to bootstrap the existing AngularJS application in ngDoBootstrap. For the upgrade to work property, upgrade.bootstrap has to be called inside the Angular zone, and doing it in ngDoBootstrap achieves that.
With this setup in place, the order of events during bootstrap will look as follows:
- Angular application bootstraps.
- AngularJS application bootstraps.
- AppComponent gets created.
- AngularJS router kicks in and inserts its view into the ng-view.
Summary
This strategy is a good first step of upgrading an app. It takes five minutes to implement. And what we are getting at the end is technically a new Angular application, even though the meat of the app is still written in AngularJS.
Upgrading Angular Applications Book
This article is based on the Upgrading Angular Applications book, which you can find here https://leanpub.com/ngupgrade. If you enjoy the article, check out the book!
Victor Savkin is a co-founder of Nrwl. We help companies develop like Google since 2016. We provide consulting, engineering and tools.
If you liked this, click the 👏 below so other people will see this here on Medium. Follow @victorsavkin to read more about monorepos, Nx, Angular, and React.
