How would you migrate a legacy AngularJS app to Angular (2+)?

Migrating a legacy AngularJS app to Angular (2+) is a multi-step process that involves strategic planning, gradual refactoring, and leveraging Angular’s Upgrade Module (@angular/upgrade). The goal is to run both frameworks side by side temporarily and progressively move toward a full Angular architecture.

🔁 Migration Strategy Overview (Step-by-Step)

✅ 1. Assess and Audit the AngularJS App

• Inventory of all components, services, directives, filters

• Identify areas of complexity (e.g., custom directives, stateful services)

• Map routing and state management approaches (e.g., $stateProvider, $scope, $rootScope)

✅ 2. Prepare the AngularJS App

• Upgrade to AngularJS 1.7.x (last LTS version)

• Use component-based architecture (.component() instead of .controller() and .directive())

• Ensure strict DI annotations for compatibility with AOT

✅ 3. Set Up the Hybrid App (Angular + AngularJS)

Use Angular’s @angular/upgrade module:

npm install @angular/upgrade

Create a hybrid bootstrap using UpgradeModule:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';
import { angularjsApp } from './legacy-app';

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

✅ 4. Migrate Services and Components Gradually

🡒 Downgrade Angular services/components for use in AngularJS:

import { downgradeInjectable } from '@angular/upgrade/static';
angular.module('app').factory('newService', downgradeInjectable(NewService));

🡒 Upgrade AngularJS services/components for use in Angular:

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

@Component({
  selector: 'legacy-widget',
  template: '<div>{{ data }}</div>',
})
class LegacyWrapperComponent {}

@NgModule({
  declarations: [LegacyWrapperComponent],
  entryComponents: [LegacyWrapperComponent],
})
class AppModule {
  constructor(upgrade: UpgradeModule) {
    upgrade.upgradeNg1Component('legacyWidget');
  }
}

✅ 5. Route Partitioning

• Use AngularJS routing for legacy views, Angular Router for new views

• Optionally use ui-router hybrid to manage routing across both

✅ 6. Move Feature-by-Feature

• Start with isolated features (e.g., a form or dashboard widget)

• Build new features in Angular only

• Gradually replace AngularJS views, services, directives with Angular equivalents

✅ 7. Remove AngularJS

• Once all features are migrated, remove UpgradeModule

• Clean up legacy code and dependencies

🧠 Best Practices

• Keep Angular and AngularJS code in separate folders (/legacy, /app)

• Use shared services for data access (migrated early)

• Avoid deep coupling between AngularJS and Angular parts

• Automate tests to ensure functional parity

🧪 Tools That Help

• ngUpgrade

• ngMigration Assistant

• Linting tools to detect non-upgradeable patterns