The dynamic upgrade approach using UpgradeAdapter was the original method for creating hybrid Angular/AngularJS applications. This approach is deprecated since Angular v5 and should not be used for new applications. Use the static approach with UpgradeModule instead.
Main class for the dynamic upgrade approach - allows runtime integration of Angular and AngularJS.
/**
* Dynamic upgrade adapter for hybrid applications (DEPRECATED)
* @deprecated Use UpgradeModule from @angular/upgrade/static instead
*/
class UpgradeAdapter {
/**
* Creates UpgradeAdapter instance
* @param ng2AppModule - Angular app module class
* @param compilerOptions - Optional compiler configuration
*/
constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions);
/**
* Convert Angular component to AngularJS directive
* @param component - Angular component class
* @returns AngularJS directive definition function
* @deprecated Use downgradeComponent from @angular/upgrade/static
*/
downgradeNg2Component(component: Type<any>): Function;
/**
* Convert AngularJS component for use in Angular
* @param name - AngularJS directive/component name
* @returns Angular component class
* @deprecated Use UpgradeComponent from @angular/upgrade/static
*/
upgradeNg1Component(name: string): Type<any>;
/**
* Bootstrap hybrid application
* @param element - DOM element to bootstrap on
* @param modules - AngularJS modules to include
* @param config - Optional bootstrap configuration
* @returns Reference to hybrid application
* @deprecated Use UpgradeModule.bootstrap()
*/
bootstrap(element: Element, modules?: any[], config?: any): UpgradeAdapterRef;
/**
* Make AngularJS service available to Angular
* @param name - AngularJS service name
* @param options - Optional configuration
* @deprecated Create new Angular services instead
*/
upgradeNg1Provider(name: string, options?: {asToken?: any}): void;
/**
* Make Angular service available to AngularJS
* @param token - Angular injection token
* @returns AngularJS factory function
* @deprecated Use downgradeInjectable from @angular/upgrade/static
*/
downgradeNg2Provider(token: any): Function;
/**
* Register adapter for unit testing
* @param modules - AngularJS modules for testing
* @returns Reference for test cleanup
* @deprecated Use testing utilities from @angular/upgrade/static/testing
*/
registerForNg1Tests(modules?: string[]): UpgradeAdapterRef;
}Reference object for controlling a hybrid application created with UpgradeAdapter.
/**
* Reference to hybrid application instance (DEPRECATED)
* @deprecated Use UpgradeModule instead
*/
class UpgradeAdapterRef {
/** Access to AngularJS $rootScope */
ng1RootScope: any;
/** Access to AngularJS $injector */
ng1Injector: any;
/** Access to Angular NgModuleRef */
ng2ModuleRef: NgModuleRef<any>;
/** Access to Angular injector */
ng2Injector: Injector;
/**
* Register callback when application is ready
* @param fn - Callback function
* @deprecated Use NgModule lifecycle hooks
*/
ready(fn: (upgradeAdapterRef?: UpgradeAdapterRef) => void): void;
/**
* Clean up hybrid application
* @deprecated Use NgModule.ngOnDestroy()
*/
dispose(): void;
}These examples show the deprecated dynamic approach for reference only:
import { UpgradeAdapter } from "@angular/upgrade";
import { Component } from "@angular/core";
// DO NOT USE - This is deprecated
const upgradeAdapter = new UpgradeAdapter();
@Component({
selector: "my-component",
template: "<h1>Angular Component</h1>"
})
class MyComponent {}
// Downgrade Angular component (deprecated way)
angular.module("myApp").directive("myComponent",
upgradeAdapter.downgradeNg2Component(MyComponent)
);
// Upgrade AngularJS component (deprecated way)
const UpgradedComponent = upgradeAdapter.upgradeNg1Component("someAngularJSComponent");
// Bootstrap (deprecated way)
upgradeAdapter.bootstrap(document.body, ["myApp"]);// DO NOT USE - This is deprecated
const upgradeAdapter = new UpgradeAdapter();
// Make AngularJS service available to Angular (deprecated)
upgradeAdapter.upgradeNg1Provider("$http");
upgradeAdapter.upgradeNg1Provider("myAngularJSService", {
asToken: "MY_SERVICE"
});
// Make Angular service available to AngularJS (deprecated)
@Injectable()
class MyAngularService {}
angular.module("myApp").factory("myAngularService",
upgradeAdapter.downgradeNg2Provider(MyAngularService)
);If you have legacy code using the dynamic approach, migrate to the static approach:
Before (Dynamic - Deprecated):
const upgradeAdapter = new UpgradeAdapter();
// Downgrade component
angular.module("app").directive("myComponent",
upgradeAdapter.downgradeNg2Component(MyComponent)
);
// Upgrade component
const UpgradedComponent = upgradeAdapter.upgradeNg1Component("oldComponent");After (Static - Recommended):
import { downgradeComponent, UpgradeComponent } from "@angular/upgrade/static";
// Downgrade component
angular.module("app").directive("myComponent",
downgradeComponent({ component: MyComponent })
);
// Upgrade component
@Component({
selector: "old-component",
template: ""
})
class OldComponent extends UpgradeComponent {
constructor(elementRef: ElementRef, injector: Injector) {
super("oldComponent", elementRef, injector);
}
}Before (Dynamic - Deprecated):
// Make AngularJS service available to Angular
upgradeAdapter.upgradeNg1Provider("myService");
// Make Angular service available to AngularJS
angular.module("app").factory("angularService",
upgradeAdapter.downgradeNg2Provider(AngularService)
);After (Static - Recommended):
import { downgradeInjectable } from "@angular/upgrade/static";
// Don't upgrade AngularJS services - create new Angular services instead
@Injectable()
class ModernService {
// Replace AngularJS service functionality
}
// Make Angular service available to AngularJS
angular.module("app").factory("angularService",
downgradeInjectable(AngularService)
);Before (Dynamic - Deprecated):
upgradeAdapter.bootstrap(document.body, ["myApp"]);After (Static - Recommended):
import { UpgradeModule } from "@angular/upgrade/static";
@NgModule({
imports: [UpgradeModule]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ["myApp"]);
}
}
platformBrowserDynamic().bootstrapModule(AppModule);The dynamic approach has several limitations that the static approach addresses:
Always use the static approach (@angular/upgrade/static) for new hybrid applications.