angular: Async event subscriber not updating UI after async call

Hi!

The issue is that the async call result is outside ngZone thus not triggering the UI update. You can do something like:

public constructor(private _ngZone: NgZone) {

}

public async update() {
    try {
      this.a = 1;
      let newBValue = await this.dataService.getAsync();

      this._ngZone.run(() => {
          this.b = newBValue;
          this.c = 2;
      });
    }
    catch (error) {
      // blah
    }
  }

Resolved! The culprit was Babel… I’m not sure what precisely, but I reverted all my Babel related npm modules back to a known good version and everything is functioning normally again. Apologies that the title of this issue turned out to be nothing to do with the problem.

I reproduced the issue on the AngularClass Angular2 Webpack Starter project so I can upload that minimal demonstration of the issue if it interests anyone. I simply modified the project to update the UI using setTimeout as above, then modified the Webpack config to use Babel as part of the transpilation process… and suddenly setTimeout stops updating the page.

Thanks for the help @jpsfs and @zoechi.

So by last quarter of 2018 we still have the same issue with async calls and zone.js.

@jamesthurley Working with the configuration provided, I came across another issue that seems to be a hit or miss with the babel-loader I can’t quite narrow down. babel generates bad code (seems to happen when I refactor my code a lot). It generates “import _Object$defineProperty from ‘babel-runtime/core-js/object/define-property’;” that is still es6. I’m guessing this is still not quite stable.

Looking around I saw that others have hit the same issue and have had a workaround provided to isolate the plugins. I’ve changed my .babelrc configure to incorporate the workaround. Let me know if you hit this error yourself.

https://github.com/babel/babel-loader/issues/195#issuecomment-238804184

.babelrc

{
  "passPerPreset": true,
  "presets": [
    { "plugins": [ "transform-runtime" ] },
    {
      "passPerPreset": false,
      "presets": [ "es2015", "stage-0", "angular2" ]
    }
  ]
}

I had same problem with angular 6 and 7. There was a *ngFor in my html file and when i update the array, nothing happened to ui until click on one of components in that page. so this worked for me:

1. instead of simple *ngFor on an array, use an Observable and let a of _observableVar | async in html file
2. inject a private _ngZone: NgZone in component constructor
3. and write this line this._ngZone.run(() => {}); after your async call.

neither of my methods have async/await syntax

  getListFromServer() {
    this._observableVar = this.api.listAvailableAndReservedTurns();
    this._ngZone.run(() => {});
  }

I have the same problem with the version of angular 6.1.10. It does not update the form data. It is only updated if I click on some field of the form which should not happen. This happens to me when I make a guard in a component that validates the user’s authentication status and I subscribe to a firebase route, but if I remove the guard it works correctly for me. I have been looking at all the logic and so far I have not been able to solve the problem

@jamesthurley I have a nice workaround update. I found a way to keep zone.js inside the npm/webpack package management. Add a separate loader to your webpack.config.js file and raw load in the javascript workaround.

webpack.config.js

module: {
        loaders: [
            { test: /\.js$/, include: /ClientApp\/fixes/, loader: 'raw-loader' },
            { test: /\.ts$/, include: /ClientApp/, loader: 'babel-loader!ts-loader' },
.
.
.
        ]
    },
 entry: {
        main: ['./ClientApp/fixes/zone-babel-async.js','./ClientApp/boot-client.ts']
    },

./ClientApp/fixes/zone-babel-async.js

require("zone.js");

define(["require", "exports"], function (require, exports) {
    "use strict";
    require('babel-runtime/core-js/promise').default = Promise;
    exports.zonePromise = Promise
});

./ClientApp/boot-client.ts

require('./fixes/zone-babel-async');
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

@wizarrc, amazing work! This problem re-appeared for me when I updated to Angular 2 Beta 8, even with the fixed Babel version, so since then I’ve had both Babel and Angular fixed to old versions.

My plan was to wait until TypeScript 2.0 (now bumped to 2.1) before attempting to update everything, sans Babel, and it sounds like I would probably have been disappointed with the result! I’ll try and give your fix a try in the near future. I really appreciate you digging into this… I’m surprised it hasn’t effected more people.

@jamesthurley I ran into the same issue with babel. I figured this beast out finally! I will explain what is happening and what I was able to hack together to correct the issue.

I want to start out saying all the pieces I was using.

Windows 10 1607 Build 14393.51 AspNet Core 1.0 final nodejs 6.3.1 npm 3.10.3

package.json

{
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-angular2": "^0.0.2",
    "babel-preset-stage-0": "^6.5.0",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "webpack": "^1.13.1"
.
.
.
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.5",
    "@angular/compiler": "^2.0.0-rc.5",
    "@angular/core": "^2.0.0-rc.5",
    "@angular/http": "2.0.0-rc.5",
    "aspnet-webpack": "^1.0.9",
    "babel-runtime": "^6.11.6",
    "rxjs": "^5.0.0-beta.6",
    "zone.js": "^0.6.12"
.
.
.
  }
}

.babelrc

{
  "plugins": [ "transform-runtime" ],
  "presets": [ "es2015", "stage-0", "angular2" ]
}

webpack.config

var path = require('path');
var webpack = require('webpack');
.
.
.

module.exports = {
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loader: 'babel-loader!ts-loader' }
 .
.
.
        ]
    },
    ts: {
        compiler: 'typescript'
    }
    entry: {
        main: ['./ClientApp/boot-client.ts']
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
.
.
.
    ]
};

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es6",
    "sourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true
  },
  "exclude": [
      "node_modules"
  ]
}

./wwwroot/index.cshtml

.
.
.
<app>Loading...</app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main.js" asp-append-version="true"></script>
}

./ClientApp/boot-client.ts

require('zone.js');
import 'bootstrap';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module;
.
.
.
platformBrowserDynamic().bootstrapModule(AppModule);

I cut out the unrelated parts of the file.

My understanding of zones.js is that it monkey patches all the various asynchronous calls in order to have angular 2 get notified and perform a change detection. So it turns out that if you import/require zones.js inside the boot-client.ts file while compiling async/await down to es5 using babel with the async plugin, in this case stage-0, it will wrap the async call in a promise. The problem is that babel injects code to patch the native Promise API before the zone.js has a chance to. A workaround is to patch the Promise using zone.js before the babel runtime has a chance to do so, then create a global variable of the patched zone-aware Promise API. Once inside the webpack bootstrap file, in this case, boot-client.ts, patch the babel runtime to use the zone-aware promise. I provide an example patch to solve this issue allowing babel to use a zone-aware promise. In the example I copy zone.js outside of the npm package and into the wwwroot/dist folder. Unfortunately, I can no longer update zone.js using npm. Ideally I would like to keep zone.js inside webpack but outside of babel, but I’m not really sure how to achieve this.

Workaournd:

index.cshtml

.
.
.
<app>Loading...</app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/zone.min.js"></script>
    <script>
            _zonePromise = Promise;
    </script>
    <script src="~/dist/main.js" asp-append-version="true"></script>
}

./ClientApp/boot-client.ts

declare var _zonePromise;
require('babel-runtime/core-js/promise').default = _zonePromise;
import 'bootstrap';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module;
.
.
.
platformBrowserDynamic().bootstrapModule(AppModule);

Hope this hack helps anyone trying to use Angular2/TypeScript targeting es6 wanting async/await with babel and webpack.

@jpsfs the behavior looks like the update runs outside the zone, the question is IMHO - why is this running outside the zone?