External promises do not trigger Angular2 change detection (UPDATE: they do)

Question

I am working on an electron application whose client side is written in Angular2 .

I had a classic problem that many people have encountered (for example, here and here ), namely that I am updating the data of my components, but the view is not updating because Angular does not know that the data has been changed. The solutions that people offer (see above as well as here ) are to manually trigger change detection either on the entire component tree or in parts (like Angular 1 $rootScope.$digest and $scope.$digest ).

However, I would like to avoid transferring all my data changes to calls to zone.run() , as this spoils the purpose of using Angular a bit.

I am sure I know why this happens: I create Bluebird Promises outside of Angular, in electronic code (i.e. the main process ), and they are not a zone, so they do not notify Angular of changes.

I do not know how to solve this. What can I do to create a Promises aware Zone in my electronic code to avoid having to manually trigger change detection all the time? Can I somehow transform my Bluebird Promises into a Promises aware zone?

EDIT . I think I was wrong, Bluebird Promises do not know the zone, even if they are created inside Angular. They generally do not know the zone as a whole.

EDIT 2 : I was completely wrong in the previous edit. Bluebird Promises works great with zones. However, in the context of an electronic application, creating a promise in the main electronic process and using it in the rendering process (where Angular lives) does not work, because the returned promise is not a zone promise. Making a promise with Angular worked.

Answer 1

As explained in EDIT # 2, the problem was that making a promise in the main electronic process made the promise sky-high. Making a promise from Angular solved it.

Answer 2

Promises do not detect Angular changes using ChangeDetectionStrategy.OnPush , except when using an asynchronous channel ... | async ... | async .

When the code is initialized outside of Angular2, it runs outside the corner zone. What you can do is move the initialization inside your Angular2 code or use "zone.run (...) to move execution inside Angulars zone. There is nothing bad about zone.run (...)`.

If the executable code changes only the local properties of the component, you can use ChangeDetectorRef.detectChanges() to trigger change detection for this component.

If the code causes changes in other components (for example, this.router.navigate(...) , then detectChanges() not enough. In this case, use zone.run() .

setTimeout(...) triggers change detection for the entire application and should be avoided as a way to automatically detect changes.