Google analytics code

Tuesday, July 11, 2017

Angular: Getting started with ngUpgrade

I've started work on upgrading an old AngularJS project to Angular using ngUpgrade. I read about this awhile ago (Angular 2 RC 2) but haven't worked with it. There's a lot of outdated information that made it hard to get anything done. I'll show you what worked for me.

The first step is placing your AngularJS application in a Angular shell. The easy way to do this is use Angular CLI to create a new project ("ng new angular_project_name") and copy your files in as static resources. One of the files created by the CLI is called .angular-cli.json. Use the apps.assets to specify single or folders images, apps.styles for css files and apps.scripts for any single javascript files. The only way to copy whole folders of files is to specify them in apps.assets. It's probably not the best way but this whole process is so you can move away from the old project structure. Hopefully you had a good build process so there are only one or two minified files you need to copy.

Now we need to make sure @angular/upgrade is part of your Angular project. Check package.json and look in the dependencies object. If you don't see @angular/upgrade then we'll need to add it via npm. Use the command "npm install -g @angular/upgrade --save" in the root of your Angular project. Once the install is done it should show in the package.json file.

The next step is changing the bootstrap process for AngularJS. Angular will now be in charge of starting the AngularJS app. My project relied on the ng-app tag on the body element. This needs to be removed. If you app uses strict-di this also needs to be removed. Open app.module.ts and add a new method to the AppModule class called ngDoBootstrap. In this method we'll use a variable that will assist us in 99% of the conversion process.

Add "import { UpgradeAdapter } from @angular/upgrade;" at the bottom of your imports section. Also we need to import forwardRef from @angular/core. This should be on the second line of your file. It should now look like this "import { NgModule, forwardRef } from '@angular/core';". Before @NgModule add this line "export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));". This variable contains methods that will allow us to upgrade AngularJS components and services so they can be used in Angular components. We can also downgrade Angular components and services so they can be used in AngularJS code.

In ngDoBootstrap add this line. "upgradeAdapter.bootstrap(document.body, NAME_OF_YOUR_APP, {'strictDi': true});". This will allow Angular to bootstrap your AngularJS application. In the root of your application use the command ng serve to start the dev environment server. Your app should be up and running.

The next steps are using upgradeAdapter.downgradeNg2Component, downgradeNg2Provider, upgradeNg1Component, upgradeNg2Provider to start converting your codebase. Here's a link to the official documentation on converting your app. Here's a link to the official documentation on UpgradeAdapter. Here's a link to my AngularJS project and here's a link to the hybrid project. Hope this helps you out.