Migrating from AngularJS to Angular (Angular 2+)

Migrating from AngularJS (1.x) to Angular (2+) is a significant transition since Angular is a complete rewrite of the framework. The migration requires careful planning and execution to ensure a smooth transition while maintaining functionality.

This guide will walk you through the step-by-step process of migrating an AngularJS application to Angular 2+ using different strategies.

1. Why Migrate from AngularJS to Angular?

1.1 Limitations of AngularJS

No longer actively supported after December 31, 2021.
Performance issues due to two-way data binding.
Difficult to scale for large applications.
Lack of modern features like component-based architecture and TypeScript.

1.2 Advantages of Angular (2+)

Improved performance using Ahead-of-Time (AOT) compilation.
TypeScript-based, providing better maintainability.
Component-driven architecture, making it modular and reusable.
Better Dependency Injection (DI) system.
More secure with built-in security features.

2. Migration Strategies

There are two main migration strategies:

2.1 Rewrite from Scratch (Recommended for Small Apps)

Best for small projects.
Takes advantage of Angular’s modern architecture.
Requires rewriting the entire application.

2.2 Hybrid Approach Using AngularJS + Angular (Recommended for Large Apps)

Best for large-scale applications.
Allows incremental migration.
Uses AngularJS and Angular together using the ngUpgrade library.

3. Preparing for Migration

3.1 Audit Your Existing AngularJS App

Identify components, directives, services, and dependencies.
Remove unused code and outdated dependencies.
Convert jQuery-based logic to Angular-friendly alternatives.

3.2 Upgrade to the Latest AngularJS Version

Before migrating, update AngularJS to the latest stable version (1.8.x).

npm install angular@1.8.2

4. Setting Up the Angular Project

4.1 Install Angular CLI

Angular CLI simplifies project setup and management.

npm install -g @angular/cli

4.2 Create a New Angular Project

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

5. Using Hybrid Mode (ngUpgrade Library)

The ngUpgrade library allows AngularJS and Angular to run together during migration.

5.1 Install Dependencies

npm install @angular/upgrade @angular/upgrade-static

5.2 Bootstrap Angular with AngularJS

Modify main.ts to bootstrap both frameworks.

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

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

6. Migrating Components

6.1 Convert an AngularJS Component to Angular Component

AngularJS Component Example

app.component("helloComponent", {
    template: `<h1>Hello {{ $ctrl.name }}</h1>`,
    controller: function() {
        this.name = "AngularJS";
    }
});

Converted Angular Component

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

@Component({
    selector: 'app-hello',
    template: `<h1>Hello {{ name }}</h1>`
})
export class HelloComponent {
    name = "Angular";
}

7. Migrating Services

7.1 Upgrade AngularJS Service to Angular

AngularJS Service Example

app.service('UserService', function() {
    this.getUser = function() {
        return { name: "John Doe" };
    };
});

Convert to Angular Service

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

@Injectable({
    providedIn: 'root'
})
export class UserService {
    getUser() {
        return { name: "John Doe" };
    }
}

Use Angular Service in AngularJS

Modify app.module.ts to provide the Angular service inside AngularJS.

import { UserService } from './user.service';

angular.module('myAngularJSApp').service('UserService', UserService);

8. Migrating Routing

8.1 AngularJS Routing Example

app.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .otherwise({ redirectTo: '/home' });
});

8.2 Convert to Angular Router

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

9. Migrating Directives

9.1 AngularJS Directive Example

app.directive('customDirective', function() {
    return {
        template: '<h1>Custom Directive in AngularJS</h1>'
    };
});

9.2 Convert to Angular Directive

import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[appCustomDirective]'
})
export class CustomDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.color = 'blue';
    }
}

10. Removing AngularJS Completely

Once all components, services, and routes are migrated to Angular, remove AngularJS dependencies:

npm uninstall angular angular-route angular-animate

11. Testing and Debugging

Use Karma & Jasmine for unit testing.
Check the browser console for errors and missing dependencies.
Run end-to-end (E2E) tests with Cypress or Protractor.

ng test  // Run unit tests
ng e2e   // Run E2E tests

12. Deploying the Angular Application

12.1 Build the Angular App

ng build --prod

12.2 Deploy on a Web Server (e.g., Firebase, Netlify, AWS S3)

firebase deploy