Hybrid approach for running AngularJS and Angular together

The hybrid approach allows AngularJS (1.x) and Angular (2+) to coexist in the same project during migration. This is done using the ngUpgrade module, enabling incremental migration instead of a full rewrite.

1. Why Use a Hybrid Approach?

✔ Incremental Migration – No need to rewrite everything at once
✔ Reuse Existing Code – Keep working AngularJS features while migrating
✔ Reduce Risk – Migrate step by step, minimizing downtime
✔ Leverage Angular Features – Use Angular services and components gradually

2. Install Required Dependencies

To use both AngularJS and Angular together, install @angular/upgrade.

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

3. 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 });
});

This ensures both Angular and AngularJS run simultaneously.

4. Downgrade Angular Components for AngularJS

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

Example: Angular Component

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

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

Make It Usable in AngularJS

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

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

Now, <my-angular-component></my-angular-component> can be used in AngularJS templates.

5. 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 It 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));

Now, Angular can inject and use the AngularJS service.

6. Upgrade AngularJS Components to Angular

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

Example: AngularJS Component

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

Make It Usable in 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, <my-angular-js-component></my-angular-js-component> can be used in Angular templates.

7. Migrate Routing to Angular Router

You can gradually migrate from AngularJS routing ($routeProvider) to Angular’s RouterModule.

AngularJS Route

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

Angular Router

import { 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 {}

Slowly move each route to Angular while keeping the old ones functional.

8. Gradually Remove AngularJS Code

Once all components and services are migrated to Angular, you can:

Remove AngularJS dependencies (angular.module, $scope, etc.)
Fully switch to Angular’s RouterModule
Optimize Angular with Ahead-of-Time (AOT) Compilation