Is there a way to use async/await with angular-cli?

[alexbyk]

I'm trying to use new cool async/await feature (I've updated all packages using ncu -a before, tsc version is 2.1.5), but there are some problems

With "target": "es6" and production mode:

ERROR in main.1f723955bbdd8d8ba7ed.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (ApiService)

With "target": "es5",

Async functions are only available when targeting ECMAScript 2015 or higher

As I understand, this is because UglifyJS doesn't support es6.
Without --prod and with es6 target it works. With --prod doesn't

Is there any way to use angular-cli + async/await without problem?

[hccampos]

I think you will have to wait for Angular 4 to be able to use TS >= 2.1 Check #3525

[deebloo]

the newest version of the cli (beta-31) should have support for generating a project with angular 4 which mean you can safely use type 2.1

[filipesilva]

Closing as answered.

[alexbyk]

Actually not answered at all((( I already use TS 2.1.5. How switching to Angular 4 could change things with UglifyJS?

[kallex]

I played about this; actually Typescript 2.1.0 works with es5. I tested grabbing cli beta-31 and applied -ng4 to get 4.0.0-beta.7

So async/await work without having to change target to es6.

[kallex]

I tested it with non-beta @angular 2 stack as well:
@angular/cli: 1.0.0-beta.31
node: 6.9.5
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

Manually updating my Typescript to 2.1.0 allows me to use async/await on code even on es5, and it does build with -prod flag then (whereas es6 doesn't).

My project was small - the Hero Manager tutorial, so it might miss some obvious, but I could repro the issue present here and I could solve the working version of async/await in that project.

[alexbyk]

@kallex Could you please share your tsconfig for ng2+es5+async/awat + prod flag? Because when I change target to 'es5' async/await become broken

[kallex]

@alexbyk here's full repo.

https://github.com/kallex/herotutorial

There were some probably unnecessary experiments. The final step that succeeded for me was uninstalling Typescript and reinstalling it as 2.1.0 (modified just package.json ran npm install).

Edit: For me it was also broken with 2.0.3 Typescript version; in my case the WebStorm editor was first to complain about async/await if I had es5 enabled. After updating Typescript, WebStorm was happy and so was the build chain still with es5.

[alexbyk]

@kallex thanks a lot. I'll check it out tomorrow

[alexbyk]

@kallex thanks again. Indeed I reinstalled all packages and that helped

[kallex]

@alexbyk Thank you for pointing this topic out. I was interested in it as well, but it wasn't that much brought up elsewhere. And then I was just about in proper situation to start from scratch and explore :-)

I wanted to find a solution that stays mainly on angular-git; with as little modifications as possible - and I'm glad we did :-)

[kianfang]

@kallex Thanks.I had solved to set package.typescript as 2.1 :-)
the async/await become to normal function.

[jmls]

I am also having issues with trying to get await to work, and can't figure it out.

typescript 2.2.2

tsconfig:

    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",

"@angular/cli": "^1.0.0",

Within a class I am trying to write this

let foo = await this.http.get('/api/bar');

but am getting the compile error

ERROR in /home/ubuntu/workspace/auth.service.ts (53,25): ',' expected.
/home/ubuntu/workspace/auth.service.ts (53,19): Cannot find name 'await'.

what am I missing ? thanks!

[arlowhite]

Just FYI, the function you are using await in must be tagged with async

The error message is not very helpful at suggesting this.

Cannot find name 'await'.

[Thommas]

The following worked for me:

/e2e/tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "outDir": "../dist/out-tsc-e2e",
    "module": "commonjs",
    "target": "es6",
    "types":[
      "jasmine",
      "node"
    ]
  }
}

My problem is that async/await randomly fails to wait for Angular to resolve a click, or a change of URL.

If I run each test independently, then everything is fine and quick.

I used to use browser.sleep one year ago with Angular1.x, I'm glad we can use await/async, that's clearly the future !

[arlowhite]

@Thommas Maybe not relevant, but Angular 4.1.3 made a change to Promises used by the Router
https://github.com/angular/angular/blob/master/CHANGELOG.md

router: Wrap Promise-like instances in native Promises

So maybe awaiting a Router's Promise was broken previous to 4.1.3?

[Thommas]

Just updated to 4.1.3, same behavior.

I've tried using browser.sleep to fix some tests, but I still end up with 2/3 random tests failed out of 35 tests.

When I run tests one by one, they all pass without any problem.

A typical test looks like this:

e2e-spec.ts

  it('should access Home', async() => {
    await page.login('[email protected]');
    await page.navigateTo('/');
    await page.expectCurrentUrl('/');
  });

app.po.ts

  async login(username: string, password?: string) {
    await this.logout();
    await this.navigateTo('/security/login');
    await element(by.id('email')).sendKeys(username);
    await element(by.id('password')).sendKeys(password ? password : username);
    await element(by.id('submit-login-user')).click();
  }

  async logout() {
    await this.navigateTo('/');
    await browser.executeScript('window.indexedDB.deleteDatabase("localforage")');
  }

  async expectCurrentUrl(url) {
    expect(await browser.getCurrentUrl()).toEqual(browser.baseUrl + url);
  }

  async navigateTo(url: string) {
    await browser.get(url);
  }

EDIT: Should have asked this question to my rubber duck. Because I found the obvious flaw in this code.
browser.executeScript should be browser.executeAsyncScript !

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}