Migrate AngularJS to Angular using UpgradeModule (Part 6)

Danny Cornelisse
17-12-2018

Part 1: Setting up the hybird app

Part 2: Refactor constants, values and services

Part 3: Refactor components

Part 4: Refactor directives

Part 5: Phase out angularJS services

Part 6: Remove dependent libraries and remove angularJS

Part 7: Deployment and build

Refactoring angularJS to Angular

The previous steps explained how to set up the hybrid application (step 1), how to refactor constants, values and services (step 2), how to refactor components (step 3), how to refactor directives (step 4) and how to phase out angularJS services (step 5). This next step will dive into replacing angularJS dependent libraries and removing angularJS from the hybrid app.

Replace angularJS dependent libraries

If all angularJS services, controllers, services etc. have been refactored to their Angular equivalents, the last step is to replace all angularJS dependent libraries, such as angular-ui-bootstrap. Firstly, it may be that these libraries do not have an Angular implementation! In that case, a new Angular compatible library has to be found and implemented. This of course comes with certain risks:

 

  • The replacing library may visually be different
  • The replacing library may functionally be different

 

Clearly, changes in functionality are unwanted. Therefore, keep functional requirements and or specifications in mind when replacing. After replacing, remove the angularJS dependent (npm) package and remove it from the app.module.ajs.ts.

Ui-router

Ui-router has a angular-hybrid module that helps the transition from angularJS to Angular. For a detailed guide, how to implement the hybrid ui-router, please refer to:

https://github.com/ui-router/angular-hybrid

For a practical example, please see:

https://itnext.io/sharing-the-ui-router-between-angularjs-and-angular-6-84f6370ec557

Angular-bootstrap

Angular-bootstrap (angularJS + Bootstrap 3) has an Angular equivalent, ng-bootstrap (Angular + Bootstrap 4), that provides native Bootstrap and a wide range of (Angular) components and widgets. Note that these widgets may be visually and functionally slightly different:

https://ng-bootstrap.github.io/#/home

 

Remove angularJS

The last step is to remove angularJS from the app. At this point, there are no angularJS files to be refactored or to be replaced. That means that the only the hybrid bootstrapping in app.module.ts. Remove the UpgradeModule import and refactor the exported AppModule to:

@NgModule({
…
})
export class AppModule { }

Then, in main.ts, remove the require.context functionality that is used to load the angularJS files as modules (for webpack):

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Then, remove the all downgraded components and services from the Angular component and services:

declare var angular: angular.IAngularStatic; // remove this line
import { downgradeInjectable } from '@angular/upgrade/static'; // remove this line
import * as angular from 'angular'; // remove this line

@Injectable()
export class NewService {
  …
}

angular.module('app') // remove this line
    .service('newService', downgradeInjectable(NewService)); // remove this line

Then, it is time to remove all references to the angularJS package. First, in angular-cli.json, remove it from “scripts”:

      "scripts": [
        "./../node_modules/jquery/dist/jquery.min.js",
        "./../node_modules/angular/angular.min.js", // remove this
        "./../node_modules/angular-route/angular-route.min.js" // remove this
      ],

Then, remove angularJS from the project by uninstalling it from package.json:

npm uninstall –save-dev angular

 

Now, only an Angular App is left, with no dependencies on angularJS. In the next and last part, the development and build configuration will be discussed.

LEAVE A REPLY

you might also like