Angular Migration

Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.

When to Use This Skill

• Migrating AngularJS (1.x) applications to Angular (2+)

• Running hybrid AngularJS/Angular applications

• Converting directives to components

• Modernizing dependency injection

• Migrating routing systems

• Updating to latest Angular versions

• Implementing Angular best practices

Migration Strategies

1. Big Bang (Complete Rewrite)

• Rewrite entire app in Angular

• Parallel development

• Switch over at once

• Best for: Small apps, green field projects

2. Incremental (Hybrid Approach)

• Run AngularJS and Angular side-by-side

• Migrate feature by feature

• ngUpgrade for interop

• Best for: Large apps, continuous delivery

3. Vertical Slice

• Migrate one feature completely

• New features in Angular, maintain old in AngularJS

• Gradually replace

• Best for: Medium apps, distinct features

Hybrid App Setup

// main.ts - Bootstrap hybrid app 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); // Bootstrap AngularJS upgrade.bootstrap(document.body, ["myAngularJSApp"], { strictDi: true }); });

// app.module.ts import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { UpgradeModule } from "@angular/upgrade/static";

@NgModule({ imports: [BrowserModule, UpgradeModule], }) export class AppModule { constructor(private upgrade: UpgradeModule) {}

ngDoBootstrap() { // Bootstrapped manually in main.ts } }

Component Migration

AngularJS Controller → Angular Component

// Before: AngularJS controller angular .module("myApp") .controller("UserController", function ($scope, UserService) { $scope.user = {};

$scope.loadUser = function (id) {
  UserService.getUser(id).then(function (user) {
    $scope.user = user;
  });
};

$scope.saveUser = function () {
  UserService.saveUser($scope.user);
};

});

// After: Angular component import { Component, OnInit } from "@angular/core"; import { UserService } from "./user.service";

@Component({ selector: "app-user", template: <div> <h2>{{ user.name }}</h2> <button (click)="saveUser()">Save</button> </div> , }) export class UserComponent implements OnInit { user: any = {};

constructor(private userService: UserService) {}

ngOnInit() { this.loadUser(1); }

loadUser(id: number) { this.userService.getUser(id).subscribe((user) => { this.user = user; }); }

saveUser() { this.userService.saveUser(this.user); } }

AngularJS Directive → Angular Component

// Before: AngularJS directive angular.module("myApp").directive("userCard", function () { return { restrict: "E", scope: { user: "=", onDelete: "&", }, template: <div class="card"> <h3>{{ user.name }}</h3> <button ng-click="onDelete()">Delete</button> </div> , }; });

// After: Angular component import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({ selector: "app-user-card", template: <div class="card"> <h3>{{ user.name }}</h3> <button (click)="delete.emit()">Delete</button> </div> , }) export class UserCardComponent { @Input() user: any; @Output() delete = new EventEmitter<void>(); }

// Usage: <app-user-card [user]="user" (delete)="handleDelete()"></app-user-card>

Service Migration

// Before: AngularJS service angular.module("myApp").factory("UserService", function ($http) { return { getUser: function (id) { return $http.get("/api/users/" + id); }, saveUser: function (user) { return $http.post("/api/users", user); }, }; });

// After: Angular service import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from "rxjs";

@Injectable({ providedIn: "root", }) export class UserService { constructor(private http: HttpClient) {}

getUser(id: number): Observable<any> { return this.http.get(/api/users/${id}); }

saveUser(user: any): Observable<any> { return this.http.post("/api/users", user); } }

Dependency Injection Changes

Downgrading Angular → AngularJS

// 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()); });

Upgrading AngularJS → Angular

// AngularJS service angular.module('myApp').factory('oldService', function() { return { getData: function() { return 'data from AngularJS'; } }; });

// Make available to Angular import { InjectionToken } from '@angular/core';

export const OLD_SERVICE = new InjectionToken<any>('oldService');

@NgModule({ providers: [ { provide: OLD_SERVICE, useFactory: (i: any) => i.get('oldService'), deps: ['$injector'] } ] })

// Use in Angular @Component({...}) export class NewComponent { constructor(@Inject(OLD_SERVICE) private oldService: any) { console.log(this.oldService.getData()); } }

Routing Migration

// Before: AngularJS routing angular.module("myApp").config(function ($routeProvider) { $routeProvider .when("/users", { template: "<user-list></user-list>", }) .when("/users/:id", { template: "<user-detail></user-detail>", }); });

// After: Angular routing import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router";

const routes: Routes = [ { path: "users", component: UserListComponent }, { path: "users/:id", component: UserDetailComponent }, ];

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

Forms Migration

<!-- Before: AngularJS --> <form name="userForm" ng-submit="saveUser()"> <input type="text" ng-model="user.name" required /> <input type="email" ng-model="user.email" required /> <button ng-disabled="userForm.$invalid">Save</button> </form>

// After: Angular (Template-driven) @Component({ template: <form #userForm="ngForm" (ngSubmit)="saveUser()"> <input type="text" [(ngModel)]="user.name" name="name" required> <input type="email" [(ngModel)]="user.email" name="email" required> <button [disabled]="userForm.invalid">Save</button> </form> })

// Or Reactive Forms (preferred) import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({ template: <form [formGroup]="userForm" (ngSubmit)="saveUser()"> <input formControlName="name"> <input formControlName="email"> <button [disabled]="userForm.invalid">Save</button> </form> }) export class UserFormComponent { userForm: FormGroup;

constructor(private fb: FormBuilder) { this.userForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); }

saveUser() { console.log(this.userForm.value); } }

Migration Timeline

Phase 1: Setup (1-2 weeks)

• Install Angular CLI
• Set up hybrid app
• Configure build tools
• Set up testing

Phase 2: Infrastructure (2-4 weeks)

• Migrate services
• Migrate utilities
• Set up routing
• Migrate shared components

Phase 3: Feature Migration (varies)

• Migrate feature by feature
• Test thoroughly
• Deploy incrementally

Phase 4: Cleanup (1-2 weeks)

• Remove AngularJS code
• Remove ngUpgrade
• Optimize bundle
• Final testing