Migrate AngularJS to Angular using UpgradeModule (Part 6)

Danny Cornelisse

Part 1: Setting up the hybird app

Part 2: Refactor constants, values and services

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 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:


For a practical example, please see:



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:



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:

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) {


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

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/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.


you might also like