Using AngularJS Upgrade Module (ng-upgrade)

The ngUpgrade module enables hybrid applications, allowing AngularJS (1.x) and Angular (2+) to coexist in the same project. This makes incremental migration possible instead of a full rewrite.

---

1. Install Required Dependencies

Before using ngUpgrade, install Angular alongside AngularJS in your project.

npm install @angular/upgrade --save
npm install angular angular-route --save

---

2. Bootstrap AngularJS Inside Angular

Modify main.ts to bootstrap both frameworks together.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as angular from 'angular';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
});

---

3. Downgrade Angular Components for AngularJS

If you want to use an Angular component inside an AngularJS template, you downgrade it.

Example: Angular Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-angular-component',
  template: `<h1>Hello from Angular!</h1>`
})
export class MyAngularComponent {}

Downgrade for AngularJS

import { downgradeComponent } from '@angular/upgrade/static';

angular.module('myAngularJSApp').directive('myAngularComponent', downgradeComponent({
  component: MyAngularComponent
}));

Now you can use <my-angular-component></my-angular-component> in AngularJS templates.

---

4. Upgrade AngularJS Services for Angular

If you want to use an AngularJS service inside Angular, you upgrade it.

Example: AngularJS Service

angular.module('myAngularJSApp').service('myService', function() {
  this.getData = () => "Hello from AngularJS Service!";
});

Upgrade for Angular

import { Injectable } from '@angular/core';
import { UpgradeModule, upgradeInjectable } from '@angular/upgrade/static';

@Injectable({ providedIn: 'root' })
export class MyUpgradedService {
  constructor(private myService: any) {}

  getData() {
    return this.myService.getData();
  }
}

angular.module('myAngularJSApp').factory('myUpgradedService', upgradeInjectable(MyUpgradedService));

---

5. Upgrade AngularJS Components to Angular

If you want to use an AngularJS component inside Angular, upgrade it.

Example: AngularJS Component

angular.module('myAngularJSApp').component('myAngularJsComponent', {
  template: `<h2>Hello from AngularJS</h2>`,
  controller: function() {
    console.log("AngularJS Component Loaded!");
  }
});

Upgrade for Angular

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
  selector: 'my-angular-js-component'
})
export class MyUpgradedAngularJsComponent extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('myAngularJsComponent', elementRef, injector);
  }
}

Now, you can use <my-angular-js-component></my-angular-js-component> inside Angular.

---

6. Migrate Routing to Angular Router

You can gradually move from $routeProvider to RouterModule.

AngularJS Route

angular.module('myAngularJSApp').config(($routeProvider) => {
  $routeProvider.when('/home', {
    template: '<home-component></home-component>'
  });
});

Angular Router

tsCopyEditimport { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [{ path: 'home', component: HomeComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}