The static upgrade approach using UpgradeModule is the recommended method for hybrid Angular/AngularJS applications. It provides AOT compatibility, better performance, and structured migration patterns.
NgModule that provides AngularJS core services and bootstraps hybrid applications.
/**
* NgModule for bootstrapping and running hybrid Angular/AngularJS applications
*/
class UpgradeModule {
/**
* Creates UpgradeModule instance
* @param injector - Angular injector
* @param ngZone - Angular NgZone service
* @param platformRef - Angular PlatformRef service
*/
constructor(injector: Injector, ngZone: NgZone, platformRef: PlatformRef);
/**
* Bootstrap AngularJS application inside Angular application
* @param element - DOM element to bootstrap on
* @param modules - AngularJS module names to bootstrap
* @param config - Optional AngularJS bootstrap configuration
*/
bootstrap(element: Element, modules?: string[], config?: any): void;
/** Access to AngularJS $injector service */
readonly $injector: any;
/** Access to Angular injector */
readonly injector: Injector;
/** Access to Angular NgZone */
readonly ngZone: NgZone;
}Usage Example:
import { NgModule } from "@angular/core";
import { UpgradeModule } from "@angular/upgrade/static";
@NgModule({
imports: [UpgradeModule],
// ... other module configuration
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
// Bootstrap AngularJS app within Angular
this.upgrade.bootstrap(document.body, ["myAngularJSApp"], {
strictDi: true
});
}
}The static approach requires specific bootstrap patterns:
Step 1: Angular Module Setup
import { NgModule } from "@angular/core";
import { UpgradeModule } from "@angular/upgrade/static";
@NgModule({
imports: [UpgradeModule],
declarations: [
// Angular components that will be downgraded
MyAngularComponent
],
entryComponents: [
// Required for components used by AngularJS
MyAngularComponent
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ["myAngularJSApp"]);
}
}Step 2: Main Bootstrap
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
// Bootstrap Angular application
platformBrowserDynamic().bootstrapModule(AppModule);Access AngularJS services from Angular:
import { Component, Inject } from "@angular/core";
import { UpgradeModule } from "@angular/upgrade/static";
@Component({
selector: "my-component",
template: "<div>{{data}}</div>"
})
export class MyComponent {
data: string;
constructor(private upgrade: UpgradeModule) {
// Access AngularJS service
const angularJSService = this.upgrade.$injector.get("myAngularJSService");
this.data = angularJSService.getData();
}
}The static approach automatically handles change detection between frameworks:
import { Component } from "@angular/core";
import { UpgradeModule } from "@angular/upgrade/static";
@Component({
selector: "async-component",
template: "<div>{{result}}</div>"
})
export class AsyncComponent {
result: string = "";
constructor(private upgrade: UpgradeModule) {}
performAsyncOperation() {
// Operations automatically trigger change detection
this.upgrade.ngZone.run(() => {
setTimeout(() => {
this.result = "Operation complete";
}, 1000);
});
}
}