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