Step-by-step migration from AngularJS to Angular

Migrating from AngularJS (1.x) to Angular (2+) requires a structured approach, as both frameworks have fundamental differences. Below is a step-by-step guide to help you transition smoothly.

---

Step 1: Assess Your AngularJS Application

Before migrating, evaluate your existing AngularJS app to understand the complexity and dependencies.

Checklist:

Identify key modules, controllers, services, and directives
Review third-party libraries and their compatibility with Angular
Check for deprecated APIs and outdated dependencies
Analyze performance bottlenecks and UI/UX improvements

---

Step 2: Prepare for Migration

Angular provides an “ngUpgrade” module to help with hybrid applications, allowing AngularJS and Angular to coexist during migration.

Actions:

🔹 Upgrade to the latest AngularJS 1.8 version (if not already)
🔹 Refactor code to follow best practices (e.g., use components over controllers)
🔹 Remove deprecated AngularJS features
🔹 Set up TypeScript, as Angular 2+ is TypeScript-based

---

Step 3: Set Up the Angular Environment

Create a new Angular application alongside your existing AngularJS app.

Steps:

1️⃣ Install Node.js and Angular CLI
2️⃣ Create a new Angular project:

ng new my-angular-app
cd my-angular-app

3️⃣ Configure Webpack or SystemJS for loading both AngularJS and Angular
4️⃣ Install @angular/upgrade package:

npm install @angular/upgrade --save

5️⃣ Add AngularJS dependencies to the new project:

npm install angular angular-route --save

---

Step 4: Use ngUpgrade to Run Hybrid Mode

Hybrid mode allows AngularJS and Angular components to work together.

Steps:

1️⃣ Modify main.ts to bootstrap both frameworks:

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 { AppModule } from './app.module';
import * as angular from 'angular';
import { downgradeComponent } from '@angular/upgrade/static';

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

2️⃣ Downgrade Angular components to use in AngularJS:

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

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

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

---

Step 5: Convert AngularJS Components to Angular

Migrate one component or service at a time.

Component Migration:

1️⃣ Convert AngularJS controllers to Angular components
2️⃣ Replace $scope with @Input() and @Output() for data binding
3️⃣ Move logic from AngularJS services to Angular services
4️⃣ Use Angular’s Reactive Forms instead of ng-model

---

Step 6: Update Routing to Angular Router

Replace AngularJS’s $routeProvider with Angular’s @angular/router.

Example:

AngularJS Routing:

angular.module('myApp').config(function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController'
  });
});

Angular Router (New):

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

---

Step 7: Migrate Services and Dependency Injection

Replace AngularJS services (.service(), .factory()) with Angular’s Injectable Services.

Example:

AngularJS Service:

angular.module('myApp').service('DataService', function($http) {
  this.getData = function() {
    return $http.get('/api/data');
  };
});

Angular Service (New):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('/api/data');
  }
}

---

Step 8: Remove AngularJS and Final Cleanup

Once all components and services are migrated:

Remove AngularJS dependencies
Test the new Angular application thoroughly
Optimize performance by enabling Ahead-of-Time (AOT) Compilation

---

Step 9: Deploy and Monitor

After migration, deploy your new Angular app and monitor performance.

Final Actions:

🔹 Use Chrome DevTools or Angular Batarang for debugging
🔹 Set up logging and error tracking using Sentry or LogRocket
🔹 Optimize bundle size using Webpack’s tree shaking