or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angularjs-integration.mdcomponent-bridging.mddynamic-upgrade.mdindex.mdservice-integration.mdstatic-upgrade.mdtesting-utilities.md
tile.json

tessl/npm-angular--upgrade

Angular migration library facilitating upgrade from AngularJS (v1.x) to Angular (v2+) applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/upgrade@20.2.x

To install, run

npx @tessl/cli install tessl/npm-angular--upgrade@20.2.0

index.mddocs/

Angular Upgrade

Angular Upgrade is a migration library that facilitates the upgrade path from AngularJS (v1.x) to modern Angular (v2+) applications. It provides two main approaches: the deprecated dynamic UpgradeAdapter for hybrid applications where both Angular versions can coexist, and the recommended static UpgradeModule approach for more structured migrations.

Package Information

  • Package Name: @angular/upgrade
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/upgrade

Core Imports

Main package (deprecated):

import { UpgradeAdapter, UpgradeAdapterRef, VERSION } from "@angular/upgrade";

Static package (recommended):

import { UpgradeModule, UpgradeComponent, downgradeComponent, downgradeInjectable, downgradeModule } from "@angular/upgrade/static";

Testing utilities:

import { createAngularTestingModule, createAngularJSTestingModule } from "@angular/upgrade/static/testing";

Basic Usage

import { NgModule, Component } from "@angular/core";
import { UpgradeModule, downgradeComponent } from "@angular/upgrade/static";

// Angular component to use in AngularJS
@Component({
  selector: "my-angular-component",
  template: "<h1>{{title}}</h1>"
})
export class MyAngularComponent {
  title = "Hello from Angular!";
}

// Downgrade Angular component for AngularJS
angular.module("myApp").directive("myAngularComponent", 
  downgradeComponent({ component: MyAngularComponent })
);

// Bootstrap module
@NgModule({
  imports: [UpgradeModule],
  declarations: [MyAngularComponent],
  bootstrap: []
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}
  
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ["myApp"]);
  }
}

Architecture

Angular Upgrade is organized around several key components:

  • Static Upgrade System: AOT-compatible approach using UpgradeModule for structured migrations
  • Dynamic Upgrade System: Runtime approach using UpgradeAdapter (deprecated since v5)
  • Component Bridging: Utilities to convert components between Angular and AngularJS
  • Service Integration: Methods to share services across framework boundaries
  • Testing Support: Helpers for unit testing hybrid applications
  • Type System: Complete TypeScript definitions for AngularJS integration

Capabilities

Static Upgrade Module

Recommended approach for hybrid applications with AOT compatibility and better performance.

class UpgradeModule {
  constructor(injector: Injector, ngZone: NgZone);
  bootstrap(element: Element, modules?: string[], config?: any): void;
  readonly $injector: any;
  readonly injector: Injector;
  readonly ngZone: NgZone;
}

Static Upgrade

Component Bridging

Utilities for converting components between Angular and AngularJS frameworks.

function downgradeComponent(info: {
  component: Type<any>;
  downgradedModule?: string;
  propagateDigest?: boolean;
}): any;

abstract class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
  constructor(name: string, elementRef: ElementRef, injector: Injector);
}

Component Bridging

Service Integration

Methods for sharing services and dependency injection between Angular and AngularJS.

function downgradeInjectable(token: any, downgradedModule?: string): Function;

function downgradeModule<T>(
  moduleOrBootstrapFn: Type<T> | NgModuleFactory<T> | (() => Promise<NgModuleRef<T>>)
): string;

Service Integration

Testing Utilities

Helper functions for unit testing hybrid applications with mixed Angular/AngularJS dependencies.

function createAngularTestingModule(
  angularJSModules: string[],
  strictDi?: boolean
): Type<any>;

function createAngularJSTestingModule(angularModules: any[]): string;

Testing Utilities

Dynamic Upgrade (Deprecated)

Legacy dynamic upgrade approach - use static approach for new applications.

class UpgradeAdapter {
  downgradeNg2Component(component: Type<any>): Function;
  upgradeNg1Component(name: string): Type<any>;
  bootstrap(element: Element, modules?: any[], config?: any): UpgradeAdapterRef;
  upgradeNg1Provider(name: string, options?: {asToken?: any}): void;
  downgradeNg2Provider(token: any): Function;
  registerForNg1Tests(modules?: string[]): UpgradeAdapterRef;
}

class UpgradeAdapterRef {
  ng1RootScope: any;
  ng1Injector: any;
  ng2ModuleRef: NgModuleRef<any>;
  ng2Injector: Injector;
  ready(fn: (upgradeAdapterRef?: UpgradeAdapterRef) => void): void;
  dispose(): void;
}

Dynamic Upgrade (Deprecated)

AngularJS Integration Types

Complete TypeScript definitions for AngularJS framework integration.

function getAngularJSGlobal(): any;
function setAngularJSGlobal(ng: any): void;
function getAngularLib(): any; // deprecated
function setAngularLib(ng: any): void; // deprecated;

AngularJS Integration

Version Information

const VERSION: Version;

interface Version {
  full: string;
  major: string;
  minor: string;
  patch: string;
}