ngUpgrade not working for hybrid AngularJS & Angular app

ngUpgrade is a tool that enables a hybrid application where both AngularJS and Angular components can coexist. However, many developers face issues while integrating ngUpgrade due to differences in dependency injection, bootstrap process, and component interaction.

In this guide, we’ll identify common problems and provide solutions to fix ngUpgrade integration issues.

---

1. Understanding ngUpgrade Architecture

Before diving into fixes, let’s understand how ngUpgrade works:

• AngularJS (1.x) runs alongside Angular (2+) using a hybrid approach.
• Uses UpgradeModule from Angular to bootstrap AngularJS within Angular.
• Components and services can be downgraded and upgraded for cross-communication.

A typical ngUpgrade bootstrap setup looks like this:

import { UpgradeModule } from '@angular/upgrade/static';
import { NgModule, ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AngularModule } from './angular.module'; // Angular module
import { angularjsModule } from './angularjs.module'; // AngularJS module

@NgModule({
  imports: [UpgradeModule, AngularModule]
})
export class HybridAppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    this.upgrade.bootstrap(document.body, [angularjsModule.name], { strictDi: true });
  }
}

platformBrowserDynamic().bootstrapModule(HybridAppModule);

This allows both AngularJS and Angular to work together.

---

2. Common Issues and Fixes

Issue 1: Hybrid App Not Bootstrapping

Symptoms:

• No errors, but the application doesn’t load.
• AngularJS components don’t render.
• No console logs from Angular.

Cause:

• UpgradeModule.bootstrap() is not called properly in ngDoBootstrap().
• strictDi is enabled but dependencies are not properly injected.

Fix:

Ensure the ngDoBootstrap() method correctly bootstraps AngularJS:

export class HybridAppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    this.upgrade.bootstrap(document.body, ['angularjsModule'], { strictDi: false }); // 🔧 Set strictDi: false if unsure
  }
}

Why this works:

• Ensures AngularJS is properly bootstrapped inside the hybrid app.
• Disables strict DI if dependency injection errors occur.

---

Issue 2: Downgraded Angular Component Not Rendering in AngularJS

Symptoms:

• Error: [$compile:ctreq] Directive requires "ngModel", but no controller is found.
• <my-angular-component> is ignored inside AngularJS templates.

Cause:

• The Angular component is not properly downgraded for AngularJS.
• AngularJS does not recognize the Angular component.

Fix:

Register the Angular component using downgradeComponent():

tsCopyEditimport { downgradeComponent } from '@angular/upgrade/static';
import { MyAngularComponent } from './my-angular.component';

angular.module('angularjsModule').directive('myAngularComponent',
  downgradeComponent({ component: MyAngularComponent })
);

🚀 Why this works:

• Registers the Angular component as an AngularJS directive.
• Allows <my-angular-component> to be used inside AngularJS templates.

---

Issue 3: Upgraded AngularJS Component Not Working in Angular

Symptoms:

• Can't bind to 'ngModel' since it isn't a known property of 'my-angularjs-component'.
• Angular doesn’t recognize the upgraded component.

Cause:

• The AngularJS component is not properly upgraded.
• The selector name is not matching.

Fix:

Use UpgradeModule to upgrade the component inside Angular:

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

@Component({
  selector: 'my-angularjs-component',
  template: '<div>Hello from AngularJS</div>'
})
export class MyAngularJSComponent extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('myAngularJSComponent', elementRef, injector);
  }
}

Also, register the upgraded component in AngularJS:

angular.module('angularjsModule').component('myAngularjsComponent', {
  template: `<div>Hello from AngularJS!</div>`
});

Why this works:

• Registers the AngularJS component inside Angular.
• Ensures correct selector names are used.

---

Issue 4: AngularJS Services Not Available in Angular

Symptoms:

• NullInjectorError: No provider for MyAngularJSService!
• Angular can’t access AngularJS services.

Cause:

• The AngularJS service is not properly upgraded for Angular.

Fix:

Use upgrade.injector to upgrade the service:

import { downgradeInjectable } from '@angular/upgrade/static';
import { MyAngularJSService } from './my-angularjs.service';

angular.module('angularjsModule').factory('myAngularJSService',
  downgradeInjectable(MyAngularJSService)
);

Why this works:

• Exposes AngularJS services to Angular.

---

Issue 5: Angular Services Not Available in AngularJS

Symptoms:

• Unknown provider: MyAngularServiceProvider <- MyAngularService
• AngularJS cannot access Angular services.

Cause:

• The Angular service is not downgraded for AngularJS.

Fix:

Use downgradeInjectable() inside AngularJS:

import { downgradeInjectable } from '@angular/upgrade/static';
import { MyAngularService } from './my-angular.service';

angular.module('angularjsModule').factory('myAngularService',
  downgradeInjectable(MyAngularService)
);

Why this works:

• Allows Angular services to be injected inside AngularJS.

---

Issue 6: Routing Problems Between AngularJS and Angular

Symptoms:

• AngularJS routes work, but Angular routes show blank page.
• Cannot match any routes error in Angular.

Cause:

• Angular’s RouterModule is not properly integrated with ngUpgrade.

Fix:

Use LocationStrategy for hybrid routing:

import { LocationStrategy, PathLocationStrategy } from '@angular/common';

@NgModule({
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }]
})
export class HybridAppModule {}

Why this works:

• Ensures Angular handles routing properly while coexisting with AngularJS.

---

Summary: Fixing ngUpgrade Issues

Issue	Fix
Hybrid app not bootstrapping	Call upgrade.bootstrap() properly in ngDoBootstrap()
Downgraded Angular component not working	Use downgradeComponent()
Upgraded AngularJS component not working	Use UpgradeComponent class
AngularJS services not available in Angular	Use downgradeInjectable()
Angular services not available in AngularJS	Use downgradeInjectable() inside AngularJS
Routing issues	Use LocationStrategy for hybrid routing