StackBlitz 中的错误：“意外的严格模式保留字”试图将 async/await 与 subscription.toPromise() 一起使用

Question

I have part of an Angular webapp set up on StackBlitz here .

In it, I'm experimenting with the best way to implement a mat-table with data coming from firebase with filter, pagination, and sort functionality.

In ended up writing a class implementing the MatTableDataSource interface called, VideoDataSource in './videoDataSource.model.ts'. In it, there's a method called loadMatches() . It is an async method:

async loadMatches(): Promise<any>{
    console.log("loadMatches entered");
    let results = await this.dbService.getMatchesV2().toPromise();
    console.log("results in loadMatches");
    console.log(results);
    let dbMatches = results.map(Match.fromJson);
    return dbMatches.toPromise();
  }

where dbService.getMatchesV2() in turn comes from an injected service and looks like this:

getMatchesV2(){
    return this.db.list<Match>('/matches').valueChanges();
  }

where db is a parameter of the database service of type AngularFireDatabase .

The loadMatches() call in the app.component.ts looks like this:

this.data = await this.dataSource.loadMatches();

where data is a parameter of AppComponent of type Match[] .

I'm getting the error, 'Unexpected strict mode reserved word', with reference to line numbers that don't make any sense (in app.module.ts; I imagine this is a post-compile line number?). The problem began immediately after I tried to implement async/await. The DatabaseService largely deals in Observables, but I figured the .toPromise() would suffice to resolve the problem. Any insights as to what is going on? Many thanks in advance!

Answer 1

What's happening?

The reserved keyword error is thrown by one of your internal dependencies.

Where exactly?

In app.component.ts , you have this line -

this.data = await this.dataSource.loadMatches();

What's the fix?

async ngOnInit() {

Why?!

Since you're using await , your function inside which await is being used needs to be marked as async . An await expression is only allowed within an async function. In your case, it's the ngOnInit . (Remember to do this in other places as well). You can read up more in Typescript 1.7's release notes

How to generally debug these problems?

This is one of those instances where the problem lies not where you're actually looking for. So, a general check for linter errors (all hail linters!), and trying in different browsers can help. You might get different error and stack trace in different browsers.

Alright! Alright! But does the error disappear? Does it work?

Here you go - https://stackblitz.com/edit/angular-tmgbw7?file=src%2Fapp%2Fapp.component.ts