AngularJS to Angular Migration Guide

अब हम एक complete, step-by-step AngularJS to Angular Migration Guide तैयार करेंगे — जिससे आप अपनी existing app को modern Angular (v2+) में smoothly migrate कर सकें।

---

🔄 AngularJS to Angular Migration Guide

(Zero to Full Angular Migration – Safely, Gradually, Effectively)

---

🧭 Overview of Migration Process

हम migration को 3 logical phases में divide करेंगे:

Phase	Goal
🔹 Phase 1	Audit & Preparation
🔸 Phase 2	Hybrid App using ngUpgrade
🔺 Phase 3	Full Angular Migration

---

🔹 Phase 1: Audit & Preparation

✅ 1. Code Audit करें

• कितने controllers, directives, filters हैं?
• कौन-कौन सी third-party libs इस्तेमाल हो रही हैं?
• कौन सा UI Router version है?
• App modular है या सब कुछ एक module में है?

👉 Goal: Component-ready architecture identify करना

---

✅ 2. Code Modularization (Refactor AngularJS app)

• हर feature को एक module में डालें
• हर directive को isolate करें
• Controller logic को services में shift करें
• controllerAs syntax use करें (controller inheritance avoid करें)

👉 इससे Angular में migrate करना easy होगा

---

✅ 3. Upgrade to Latest AngularJS (v1.8.3)

npm install angular@1.8.3

• Latest version में security और compatibility improvements हैं
• Angular v2+ का ngUpgrade इसी के साथ best work करता है

---

✅ 4. Prepare for Hybrid Mode

Install:

npm install --save @angular/upgrade @angular/core @angular/common rxjs zone.js

👉 ये hybrid app के लिए जरूरी dependencies हैं

---

🔸 Phase 2: Create Hybrid App using ngUpgrade

Hybrid app = AngularJS + Angular दोनों एक साथ चल सकते हैं

---

✅ 1. Bootstrap Angular Module with AngularJS

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

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

---

✅ 2. Downgrade Angular Components into AngularJS

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

angular.module('legacyApp')
  .directive('myComponent', downgradeComponent({ component: MyComponent }) as angular.IDirectiveFactory);

📌 अब आप Angular Component को AngularJS directive की तरह इस्तेमाल कर सकते हैं।

---

✅ 3. Upgrade AngularJS Services to Angular

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

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor() { }
}

angular.module('legacyApp')
  .factory('userService', upgradeInjectable(UserService));

---

✅ 4. Migrate Routes to Angular (One by One)

Start replacing your AngularJS routes with Angular Router gradually.

---

🔺 Phase 3: Full Migration to Angular (Drop AngularJS)

Once your entire code is rewritten in Angular:

✅ 1. Remove ngUpgrade

✅ 2. Delete all AngularJS files

✅ 3. Switch to Angular CLI-based project structure

✅ 4. Use Angular modules, components, services, routing everywhere

✅ 5. Run full E2E and unit tests

---

🔧 Optional Tools That Help

Tool	Use
ngMigration Assistant	Analyze AngularJS app
UpgradeModule	Run hybrid app
Augury	Visualize Angular components
ngUpgrade docs	https://angular.io/guide/upgrade

---

📋 Migration Checklist (Quick Recap)

• [x] AngularJS version upgraded to 1.8.3
• [x] Code modularized
• [x] All controllers shifted to services/components
• [x] Hybrid app configured using UpgradeModule
• [x] Routes, directives gradually migrated
• [x] AngularJS completely removed
• [x] App fully running on Angular (v14+, recommended)

---

🧠 Bonus Tips

• Use Angular CLI (ng new) to generate Angular structure
• Try migrating one feature/module at a time
• Keep business logic in services (easily shareable across Angular/AngularJS)
• Set realistic timeline: migration takes weeks to months depending on size

---

✅ आपने क्या सीखा?

• AngularJS से Angular 2+ पर जाने का roadmap
• Hybrid mode setup (ngUpgrade)
• Angular components और services को downgrade/upgrade करना
• Step-by-step complete migration process