Cannot run in Angular 16.1.2 - ERROR ReferenceError: queueMicrotask is not defined

[JWiseCoder]

I noticed this in our main app, so I tested it by creating a new NativeScript/Angular project and updating the versions in package.json to:

"dependencies": {
    "@angular/animations": "~16.1.0",
    "@angular/common": "~16.1.0",
    "@angular/compiler": "~16.1.0",
    "@angular/core": "~16.1.0",
    "@angular/forms": "~16.1.0",
    "@angular/platform-browser": "~16.1.0",
    "@angular/platform-browser-dynamic": "~16.1.0",
    "@angular/router": "~16.1.0",
    "@nativescript/angular": "^15.0.0",
    "@nativescript/core": "~8.5.0",
    "@nativescript/theme": "~3.0.2",
    "rxjs": "~7.6.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.1.0",
    "@angular/compiler-cli": "~16.1.0",
    "@nativescript/ios": "8.5.2",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.14",
    "@ngtools/webpack": "~16.1.0",
    "typescript": "~4.9.3"
  }

This installs and builds fine, but when it runs I get the following error (no stack trace, no exception breakpoint):
ERROR ReferenceError: queueMicrotask is not defined

It does not do this if I force it to angular 16.1.1

I can't find where this is happening, and I don't think I've seen anyone else having this particular problem. Any suggestions?

[cjohn001]

I am seeing the same problem with @angular/* 16.1.2

ERROR ReferenceError: queueMicrotask is not defined
Angular is running in development mode.
ERROR Error: Uncaught (in promise): ReferenceError: queueMicrotask is not defined
ReferenceError: queueMicrotask is not defined
at AnimationRendererFactory._scheduleCountTask (file: node_modules/@angular/platform-browser/fesm2022/animations.mjs:175:8)
at file: node_modules/@angular/platform-browser/fesm2022/animations.mjs:204:21
at _ZoneDelegate.invoke (file: node_modules/zone.js/fesm2015/zone.js:368:0)
at Zone.run (file: node_modules/zone.js/fesm2015/zone.js:129:0)
at NativeScriptNgZone.runOutsideAngular (file: node_modules/@nativescript/angular/fesm2022/nativescript-angular.mjs:7322:27)
at AnimationRendererFactory.end (file: node_modules/@angular/platform-browser/fesm2022/animations.mjs:203:23)
at detectChangesInternal (file: node_modules/@angular/core/fesm2022/core.mjs:12427:28)
at RootViewRef.detectChanges (file: node_modules/@angular/core/fesm2022/core.mjs:12931:8)
at PageRouterOutlet.activateOnGoForward (file: node_modules/@nativescript/angular/fesm2022/nativescript-angular.mjs:6817:41)
at PageRouterOutlet.activateWith (file: node_modules/@nativescript/angular/fesm2022/nativescript-angular.mjs:6779:13)
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined
ERROR ReferenceError: queueMicrotask is not defined

[edusperoni]

A quick fix is doing:

if(typeof queueMicrotask === 'undefined') {
  global.queueMicrotask = (cb) => Promise.resolve().then(cb);
}

In the polyfills.ts file

[NathanWalker]

published with @nativescript/[email protected] - a simple clean of project and re-run should pull it down since it's a transient dep on @nativescript/angular

[cjohn001]

@NathanWalker : Works as expected, thanks!

[JWiseCoder]

Also works for me. Thanks!

[guoapeng]

I solved the problem by adding the following line in polyfill.js

import "core-js/modules/web.queue-microtask"

actually core-js providered a wide range of features to fill the gap between newer ECMAScript syntax, class, functions etc and older brower runtime envs.