Using both AngularJS and Angular together causing conflicts

When migrating from AngularJS (1.x) to Angular (2+), many projects use a hybrid approach called ngUpgrade to run both frameworks together. However, integrating them can lead to conflicts, performance issues, and unexpected behavior.

Common Issues Faced in Hybrid Apps

1. Two different change detection mechanisms causing lag.
2. Conflicts in dependency injection (DI).
3. Scope-related issues ($scope vs. Angular’s ChangeDetectorRef).
4. Routing problems (ui-router vs. @angular/router).
5. Duplicate event listeners leading to performance issues.
6. Interoperability issues with services and directives.

---

1. How AngularJS and Angular Work Together

The ngUpgrade library allows both frameworks to co-exist by:

• Running AngularJS inside Angular (downgrading components).
• Running Angular inside AngularJS (upgrading components).
• Bridging services between both frameworks.
• Handling hybrid routing.

Core Tools Used in Hybrid Migration

• UpgradeModule: Bootstraps AngularJS inside Angular.
• downgradeComponent(): Uses Angular components in AngularJS.
• upgradeComponent(): Uses AngularJS components in Angular.
• downgradeInjectable(): Shares Angular services with AngularJS.
• UpgradeAdapter: Alternative migration approach.

---

2. Conflict #1: Change Detection Issues

Problem

• AngularJS uses $scope.$apply() for change detection.
• Angular uses Zone.js and a more optimized change detection system.
• Both can trigger unnecessary re-renders, slowing performance.

Solution: Synchronizing Change Detection

• Manually trigger change detection when needed:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

ngOnInit() {
  setTimeout(() => {
    this.cd.detectChanges();
  });
}

• Use NgZone to run Angular code inside AngularJS $digest cycle:

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

someMethod() {
  this.ngZone.run(() => {
    console.log('Running inside Angular zone');
  });
}

---

3. Conflict #2: Dependency Injection Issues

Problem

• Angular and AngularJS have separate DI containers.
• AngularJS services are not automatically available in Angular, and vice versa.

Solution: Sharing Services

Downgrading an Angular Service for AngularJS

import { Injectable } from '@angular/core';
import { downgradeInjectable } from '@angular/upgrade/static';

@Injectable({ providedIn: 'root' })
export class AuthService {
  isAuthenticated() {
    return !!localStorage.getItem('token');
  }
}

// Make it available in AngularJS
angular.module('myApp').factory('AuthService', downgradeInjectable(AuthService));

Upgrading an AngularJS Service for Angular

angular.module('myApp').service('LegacyService', function() {
  this.getData = function() {
    return 'Hello from AngularJS';
  };
});

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

constructor(private upgrade: UpgradeModule) {}

getLegacyData() {
  const legacyService = this.upgrade.$injector.get('LegacyService');
  console.log(legacyService.getData());
}

---

4. Conflict #3: Routing Issues

Problem

• AngularJS uses ui-router or ngRoute.
• Angular uses @angular/router.
• Navigating between frameworks can break the app.

Solution: Hybrid Routing

Use UpgradeModule to enable hybrid routing.

Step 1: Configure Hybrid Router

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
    UpgradeModule,
    RouterModule.forRoot([
      { path: 'angular-route', component: AngularComponent },
      { path: '**', redirectTo: '/angular-route' }
    ])
  ]
})
export class AppModule {
  constructor(upgrade: UpgradeModule) {
    upgrade.bootstrap(document.body, ['myApp']);
  }
}

Step 2: Handle AngularJS Routing

angular.module('myApp').config(function($routeProvider) {
  $routeProvider.when('/angularjs-route', {
    template: '<angularjs-component></angularjs-component>'
  });
});

---

5. Conflict #4: Component Compatibility Issues

Problem

• Directives in AngularJS may not work inside Angular.
• scope and $attrs no longer exist in Angular components.

Solution: Downgrade and Upgrade Components

Using an Angular Component in AngularJS

import { Component, Input } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';

@Component({
  selector: 'app-hello',
  template: `<p>Hello, {{ name }}!</p>`
})
export class HelloComponent {
  @Input() name: string = '';
}

// Make it available in AngularJS
angular.module('myApp').directive('appHello', downgradeComponent({ component: HelloComponent }));

Using an AngularJS Component in Angular

angular.module('myApp').component('angularjsComponent', {
  template: `<p>AngularJS Component</p>`
});

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({ selector: 'angularjs-component' })
export class AngularJSComponentDirective extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('angularjsComponent', elementRef, injector);
  }
}

---

6. Conflict #5: Event Propagation Issues

Problem

• AngularJS and Angular use different event-handling mechanisms.
• Click events, form submissions, and keypress events may not trigger correctly.

Solution: Use $rootScope.$applyAsync()

When listening for events in AngularJS, ensure they synchronize with Angular’s event loop:

angular.module('myApp').run(function($rootScope) {
  document.addEventListener('click', function(event) {
    $rootScope.$applyAsync(() => {
      console.log('Click event handled in AngularJS');
    });
  });
});

---

7. Conflict #6: Duplicate DOM Elements

Problem

• Using ng-if in AngularJS and *ngIf in Angular on the same element can cause duplicates.
• Angular’s change detection may not recognize elements created by AngularJS.

Solution: Use One Framework at a Time

• Wrap AngularJS templates inside an Angular component:

@Component({
  selector: 'app-legacy-wrapper',
  template: `<div ng-view></div>`
})
export class LegacyWrapperComponent {}

• Wrap Angular templates inside an AngularJS directive:

angular.module('myApp').directive('angularWrapper', function() {
  return {
    template: `<app-angular-component></app-angular-component>`
  };
});