Angular 2: A Complete Rewrite with TypeScript

Google released Angular 2 — a complete rewrite of the framework built on TypeScript, component architecture, and ahead-of-time compilation. What changed and how to migrate.

Why a Complete Rewrite¶

AngularJS (1.x) was a pioneer of SPA frameworks, but its architecture hit its limits. Two-way binding caused performance issues, dependency injection was convoluted, and scope hierarchy led to hard-to-debug bugs.

Angular 2 is a completely new framework — it shares only the name. Built on TypeScript with a component architecture inspired by React, it delivers significantly better performance and developer experience.

Components and TypeScript¶

Components are the fundamental building block of Angular 2:

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

@Component({
  selector: 'app-hero',
  template: `
    <h2>{{hero.name}}</h2>
    <p>ID: {{hero.id}}</p>
    <button (click)="save()">Save</button>
  `
})
export class HeroComponent {
  hero = { id: 1, name: 'Superman' };

  save(): void {
    console.log('Saving hero:', this.hero.name);
  }
}

TypeScript brings static typing, interfaces and better IDE support. Decorators (@Component, @Injectable) replace AngularJS configuration.

Changes from AngularJS¶

Key differences:

• Components instead of controllers — hierarchical component tree
• TypeScript instead of JavaScript — type safety and modern syntax
• RxJS Observables — reactive programming instead of promises
• Ahead-of-Time (AOT) compilation — templates compiled at build time, not at runtime
• Tree shaking — elimination of unused code
• Modular architecture — NgModules for code organisation

Performance improvements are dramatic — AOT compilation and the OnPush change detection strategy significantly reduce rendering overhead.

Migrating from AngularJS¶

Google provides the ngUpgrade module for incremental migration:

• Run AngularJS and Angular 2 side-by-side
• Migrate component by component
• Share services between both versions
• Gradually remove AngularJS dependencies

For new projects we recommend going straight to Angular 2. For existing AngularJS applications, consider whether migration is worth the investment — the answer is not always yes.

Conclusion: The Next Generation Enterprise Framework¶

Angular 2 is a bold move — a breaking change that angered part of the community, but delivered a modern, performant framework suitable for enterprise applications. The combination of TypeScript, RxJS, and AOT compilation creates a robust platform for complex web applications.