@angular/upgrade

What is @angular/upgrade?

@angular/upgrade is a library that facilitates the migration of AngularJS applications to Angular by allowing both frameworks to coexist and interoperate within the same application. It provides tools to bootstrap hybrid applications, upgrade AngularJS components to Angular, and downgrade Angular components to AngularJS.

What are @angular/upgrade's main functionalities?

Hybrid Application Bootstrapping

This feature allows you to bootstrap a hybrid application that runs both Angular and AngularJS code. The code sample demonstrates how to bootstrap an Angular module and then use the UpgradeModule to bootstrap an AngularJS application within the same document.

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

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

Upgrading AngularJS Components

This feature allows you to upgrade AngularJS components to be used in Angular. The code sample shows how to create an Angular component that wraps an AngularJS component using the UpgradeComponent class.

import { UpgradeComponent } from '@angular/upgrade/static';

@Component({
  selector: 'app-hero-detail',
  template: '<hero-detail></hero-detail>'
})
export class HeroDetailComponent extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('heroDetail', elementRef, injector);
  }
}

Downgrading Angular Components

This feature allows you to downgrade Angular components so they can be used in AngularJS applications. The code sample demonstrates how to create an AngularJS directive that wraps an Angular component using the downgradeComponent function.

import { downgradeComponent } from '@angular/upgrade/static';
import { HeroDetailComponent } from './hero-detail.component';

angular.module('angularjsApp').directive('heroDetail', downgradeComponent({
  component: HeroDetailComponent
}));

Other packages similar to @angular/upgrade

ng-metadata

ng-metadata is a library that provides a set of decorators and utilities to write AngularJS applications using Angular-style TypeScript syntax. It helps in gradually migrating AngularJS code to Angular by allowing developers to use Angular concepts in AngularJS. Unlike @angular/upgrade, which focuses on running both frameworks together, ng-metadata focuses on improving AngularJS code with Angular patterns.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

19.1.0-next.0 (2024-11-26)

common

| Commit | Type | Description | | -- | -- | -- | | e4c50b3bea | feat | expose component instance in NgComponentOutlet (#58698) |

core

| Commit | Type | Description | | -- | -- | -- | | bd1f1294ae | feat | support TypeScript 5.7 (#58609) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="19.0.1"></a>