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

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?

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

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

Closing as answered.

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

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.

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.

@kallex

@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

@alexbyk

@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.

@kallex

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

@kallex

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

@alexbyk

@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 :-)

@kallex

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

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!

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'.

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 !

@Thommas

@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?

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('superadmin@test.com');
    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 !

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.}

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

hccampos commented on Feb 9, 2017

deebloo commented on Feb 10, 2017

filipesilva commented on Feb 10, 2017

alexbyk commented on Feb 10, 2017

kallex commented on Feb 12, 2017

kallex commented on Feb 12, 2017

alexbyk commented on Feb 12, 2017

kallex commented on Feb 12, 2017

alexbyk commented on Feb 12, 2017

alexbyk commented on Feb 13, 2017

kallex commented on Feb 13, 2017

kianfang commented on Mar 22, 2017

jmls commented on Apr 13, 2017

arlowhite commented on Apr 24, 2017

Thommas commented on May 22, 2017

arlowhite commented on May 22, 2017

Thommas commented on May 23, 2017

angular-automatic-lock-bot commented on Sep 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions