Why do i have to call NgZone.run for my view to update in Angular2 with breezejs?

Question

I am trying to learn angular2 and created a test application with an odata webapi backend. In the application i have a view which fetches an array of items and i want to show these in my view.

For fetching data from the frontend i am using breezejs library since it has proved to save me alot of time in the past and i like using it with an odata backend.

The call tree and application structure looks like this:

Call starts by calling a service function from the view to start fetching the items (note that i am returning an es-6 promise from every call):

this._scrumModuleService.fetchActiveSessions().then((sessions: ScrumSession[]) => {
    // Here i have to call zone.run else my view wont update.
    this._zone.run(() => {
        this.sessions = sessions;
    });
}).catch((error: any) => {
     debugger;
});

Then from the view it will go to the service which in turn calls the repository:

public fetchActiveSessions(): Promise<ScrumSession[]> {
    return this._scrumSessionRepository.fetchActiveSessions();
}

The repository fetch function:

public fetchActiveSessions(): Promise<ScrumSession[]> {
    return this._dataContext.fetch(new breeze.EntityQuery().from("ScrumSessions").expand(['creator', 'scrumRoom','productOwner', 'users']));
}

Then eventually the repository calls the (generic) datacontext which will execute the query with the breeze entitymanager:

public fetch(query: breeze.EntityQuery, isRetry: boolean = false): Promise<any> {

    return new Promise((resolve, reject) => {
            this.entityManager.executeQuery(query).then((result: breeze.QueryResult): void => {
            // Data has been fetched, resolve the results
            resolve(result.results);
        });
    });
}

Now as you can see in the view i have to use the run function from NgZone or else my view wont update. I am wondering why i have to do this since i was expecting angular2 to see this for me automatically. I have digged through hseveral similair questions and could not really find an answer yet. I have also included the angular2-polyfills script as suggested in another thread but that did not solve it.

What am i missing or what do i have to implement for my view to update automatically without calling zone.run?

Answer 1

Angular runs in a zone where most async APIs are patched. When an async call is completed Angular runs change detection.

Somehow breeze code leaves Angulars zone and "breaks" change detection. This is either because you initialize breeze from outside Angular or breeze uses some async API that is not patched by Angulars zone and therefore callbacks are executed outside Angulars zone.