Error: Module parse failed with top-level await enabled

[MaurizioCasciano]

🐞 Bug report

Command (mark with an x)

• build

Is this a regression?

No

Description

Angular Module build fails during parsing when using a top-level await.

🔬 Minimal Reproduction

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    MyRoutingModule,
    MyApiModule
  ],
  providers: [
    {
      provide: Configuration,
      useFactory: await myAPIConfigFactory,
    },
  ]
})
export class MyModule {}

export function myAPIConfigFactory(): Promise<Configuration> {
  // The configuration is build via another service/observable
  return Promise.resolve(new Configuration());
}

🔥 Exception or Error

./my-app/my.module.ts:30:18 - Error: Module parse failed: Cannot use keyword 'await' outside an async function (30:18)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|       provide: Configuration,
|       useExisting: false,
>       useFactory: await myAPIConfigFactory
|     }]

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.3.3
Node: 16.13.1
Package Manager: npm 8.1.2
OS: linux x64

Angular: 12.2.13
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

Anything else relevant?

The ECMEScript proposal is at Stage 4, so the proposal specification is completely ready and included within the next edition.
https://github.com/tc39/proposal-top-level-await

[clydin]

Angular version 13 should not generate the babel related error described in the issue. From the version output, it appears that the project may not be fully updated as only the @angular/cli package appears to be using version 13.
Even with Angular version 13, stable support for top-level await is not available within the underlying bundler (Webpack in this case). Bundling code while maintaining top-level await semantics across module boundaries is unfortunately non-trivial.

Also, in the example code above, the await is effectively a no-op since a non-promise is being awaited (myAPIConfigFactory is a function object which is the expected value for useFactory).

[MaurizioCasciano]

I understand it is not that simple.
This would be very useful to configure a secondary module independently at run-time,
depending on the values returned from an API or configuration JSON from the assets folder.
In this case, in fact, you have to return a promise or observable.

At the moment I am somehow able to simulate the top-level await
for my lazy-loaded module using a canLoad guard, but of course, it has to be defined by the external routing module.

So, if I understood, with Angular 13 is top-level await available in an experimental mode?

[alan-agius4]

Experimental support for top level await can be enabled in version 14 by using a custom Angular CLI builder that’s enables this feature in Webpack.

That being said, I’d avoid relying on top level await, as mentioned this is quite complicated to support and might not be supported in other bundlers. Example: evanw/esbuild#253 (comment)

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