Migrate AngularJS to Angular

Angular Migration is a skill for mastering AngularJS (1.x) to Angular (2+) migration, covering hybrid apps, component conversion, dependency injection changes, and routing migration. It lays out three migration strategies to choose from: Big Bang (complete rewrite, best for small/greenfield apps), Incremental/Hybrid (AngularJS and Angular running side-by-side via ngUpgrade, migrated feature by feature, best for large apps under continuous delivery), and Vertical Slice (migrate one feature completely to Angular while old features stay on AngularJS, best for medium apps with distinct feature boundaries).

It provides working before/after code for every migration surface: hybrid app bootstrapping via UpgradeModule and platformBrowserDynamic; converting an AngularJS controller (with $scope and callback-based service calls) into an Angular component (with ngOnInit and RxJS subscribe); converting an AngularJS directive with isolate scope bindings into an Angular component with @Input/@Output/EventEmitter; converting an AngularJS factory service using $http into an Angular @Injectable service using HttpClient and returning Observable; bridging dependency injection in both directions - downgrading an Angular service to AngularJS via downgradeInjectable, and upgrading an AngularJS service to Angular via an InjectionToken and a factory provider that reaches into $injector; migrating $routeProvider-based routing to Angular's RouterModule/Routes; and migrating forms from ng-model/ng-submit to Angular template-driven forms (ngModel, #userForm="ngForm") or the preferred reactive forms approach (FormBuilder, FormGroup, formControlName).

It closes with a phased migration timeline (Phase 1 Setup: 1-2 weeks for Angular CLI, hybrid app, build tools, testing; Phase 2 Infrastructure: 2-4 weeks for services, utilities, routing) and explicit safety guidance: avoid big-bang cutovers without rollback and staging validation, and maintain hybrid compatibility testing throughout an incremental migration.

Use this skill when migrating an AngularJS (1.x) application to Angular (2+), running a hybrid AngularJS/Angular app during transition, converting directives to components, modernizing dependency injection, or migrating routing and forms.

Do not use it if you are not migrating from AngularJS, your app is already on a modern Angular version, or you only need a small UI fix that doesn't involve framework changes.

Input: an existing AngularJS codebase (controllers, directives, services, routes, forms) and a target Angular version.

Output: migrated Angular code plus a hybrid bridging setup where needed, for example the service-downgrade pattern:

// Angular service
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class NewService {
  getData() {
    return 'data from Angular';
  }
}

// Make available to AngularJS
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('myApp')
  .factory('newService', downgradeInjectable(NewService));

// Use in AngularJS
angular.module('myApp').controller('OldController', function(newService) {
  console.log(newService.getData());
});

Along with this it produces component/service/routing/forms conversions and a phased migration timeline.

Frontend engineers and teams responsible for modernizing a legacy AngularJS application who need concrete migration strategy guidance and working conversion patterns rather than a generic "upgrade your framework" checklist.