angular-migration

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