3

We are in the process of upgrading an AngularJS project to Angular 7. We are following the suggested "hybrid" approach where both frameworks run side by side. We are running into some change detection issues with native promises. Essentially an AngularJS (Service A) service is using a "downgraded" Angular 7 service (Service B). Prior to the migration all of ServiceB's method returned $q's defer.promise. However, now that Service B is an Angular 7 service we return regular Promises, but that is not playing nicely with Change Detection.

I tried wrapping SerivceB's call in a $q promise and I see it is working fine now. However, that is not a feasible solution since ServiceA will be upgraded to an Angular 7 service down the road.

Current code

ServiceA.get = function(order) {
    //do some work
    //ServiceB is the downgraded Angular 7 service
    //now returns a native promise

   return ServiceB.getOrders(order) 
}

ServiceA.processBatch = function(order,observer) {
    ServiceA.get(order)
    .then(function(resolve) {
        //should trigger the UI update in the Controller (still Angular JS)
        observer.onComplete(resolve)
    })
    .catch(function(err) {
        observer.onError(err)
    })
}

Now it gets interesting when I wrap the ServiceB getOrders call in $qs defer, because then the UI will update

ServiceA.get = function(order) {
        //do some work
        //ServiceB is the downgraded Angular 7 service
        //now returns a native promise
       var defer = $q.defer()
       ServiceB.getOrders(order)
          .then(function(resolve) { defer.resolve(resolve)})
          .catch(function(err) { defer.reject(err);}); 

       return defer.promise;
}

I'd expect there to be no difference, but when inspecting the callstack I see that the regular promise resolve runs within the zone, but when using $q i see that a $digest is followed.

I do not understand why this is the case. This is an oversimplyfied example of the code. In reality there is more going on which is why I am not able to return a promise from processBatch

3
  • Hybrid approach? That sounds extremely messy. I would imagine getting the two completely different animals to pick up each others change detection is more effort than it's worth. I would suggest starting from scratch and not trying to do any sort of 'migration.' Stand up a new project and just move stuff over as you need it. Or, somehow isolate the new angular app outside of your legacy app and use urls to have them jump between the two. I suppose you could setup a service on both sides that were smart enough to pass whatever data is needed to the route.
    – mwilson
    Jan 11, 2019 at 0:09
  • I wish that were possible. However it is a large application and we can't afford to put progress on hold for the migration. Hybrid approach seems to be the official way to do it as suggested by the folks at Angular as they provide tools to do so. angular.io/guide/upgrade . When closely following this guide it is less messy than I originally thought as the bridge between the 2 frameworks is completely handled by ngUpgrade
    – Alex
    Jan 11, 2019 at 0:38
  • I wish you good luck, Sir.
    – mwilson
    Jan 11, 2019 at 0:41

1 Answer 1

1

I found the issue after a few bad days at the office. The issue was that ServiceA was using a third party library. ServiceA was depending on some callbacks by that third party library, whenever those callback ran, I was not in the "angular" zone anymore. I was in the "" zone. My question was poorly stated and my dumbed down code did not include the part about the third party library. Moral of the story is to inspect the Call Stack to see if I am in the Angular zone or "root" zone. If you are in the root zone it is likely due to a third party library that uses events that are not monkey patched by Angular

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.