Implementing top level await feature in Angular 16

Issue with ./node_modules/lucid-cardano/esm/src/core/core.js - Error: Module parse failed due to the top-level-await experiment not being enabled (experiments.topLevelAwait must be set to true to enable it). The file was processed using these loaders:

  • ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
  • ./node_modules/source-map-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enable it)

I have attempted to modify angular.json and tsconfig files but have not found a solution.

angulartypescriptwebpack

Answer №1

The issue I encountered was similar to others, where a library designed for Node caused errors when used in the browser unless imported as mjs. Thankfully, this problem was resolved with the latest Angular builder, which abstracts these complexities.

To fix it, I simply updated my angular.json file by specifying the following configuration:

{
...
 "projects": {
   "my_project_name": {
     ...
     "architect": {
       "build": {
         // use latest builder for angular
         "builder": "@angular-devkit/build-angular:browser-esbuild"
       },
       ...
     }
    }
 }
}

This solution came from a helpful response on Stack Overflow:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the process of implementing nested service calls in Angular 2 by utilizing observables

Here are my component file and service file. I am trying to achieve that after the verification() service method is successfully called, I want to trigger another service method signup() within its success callback inside subscribe. However, I am encounter ...

angulartypescriptrxjsobservablerxjs5

JS The clipboardData in ClipboardEvent is perpetually void

I am trying to retrieve files using CTRL+V from the ClipboardEvent in Angular6, but I am encountering an issue where the clipboardData is always empty regardless of whether I test images or text. This problem persists even when tested on the latest release ...

javascriptangulartypescriptangular6

Establishing API cookies in a Single Page Application

Scenario In the development of my single-page application (SPA), I have separated the frontend and backend components onto different domains: mywebsite.com myapi.com For simplicity, I am utilizing cookies for authentication. Upon signing in, the server ...

angularhttpasp.net-corecookiessingle-page-application

Encountering a problem with Alias in webpack while trying to render client-side React components

When using an Alias defined in webpack for client-side React rendering, I encountered an issue when attempting to render on a Node server using Express. In my webpack configuration, I have set up some aliases as shown below: resolve: { extensions: [& ...

node.jsexpressreactjswebpackisomorphic-javascript

What is the functionality of the large arrow notation when used in conjunction with the value formatter in ag-Grid

In my Angular project, I have created a GridFormatterService service with static methods that can be used for value formatting in ag-Grid. For certain ag-Grids in the project, I need to pass a displayDateAndTime parameter (a boolean flag) from the column ...

javascriptangulartypescriptag-gridag-grid-angular

The Angular data table is encountering an issue as the dataStream.pipe function is not recognized

I'm currently working on setting up a table using Angular data table, but I've run into an issue related to the dataSource. I'm seeing an error message that says "dataStream.pipe is not a function", and I'm having trouble resolving it. ...

jsonangularmaterial-design

Click to load additional data until the list has reached its full length

<ng-container *ngFor="let item of itemList | slice:0:3"> <mat-checkbox>{{item}}</mat-checkbox> </ng-container> <div> <button id="loadMore">Load More</button> </div> I wo ...

javascriptangular

Azure functions encountered an issue: TypeError - it seems that the connection.query function is not recognized

Having a slight issue with my Azure function that is supposed to retrieve all data from a SQL table. The connection to the database is successful, but whenever I attempt to run the get request, it results in an error Exception: TypeError: connection.query ...

sqlnode.jstypescriptazure-functions

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

Using Couchbase Lite independently of the PhoneGap plugin

My goal is to create a hybrid mobile app using Ionic, Angular 4, and Couchbase. I am considering using Couchbase Lite to enable offline functionality. I came across a to-do list app on Github that uses a PhoneGap plugin. I'm wondering if this plugin i ...

angularionic2couchbase-lite

Tips for showcasing styled text in Vue using API data

I'm having trouble formatting text in Vue. Within a component, I have a textarea that stores a string with backspaces, etc ... in an API like this: A cellar but not only...\n\nWelcome to the Nature & Wine cellar, a true Ali-baba's cave ...

typescriptvue.js

What is the best way to sort a list with parent and child elements using Angular 2?

I have a tree structure in Angular 1 that allows me to filter the list at any level by typing in a textbox. Check out this demonstration to see it in action. Now, I am working on converting this functionality to Angular 2 and aiming for the desired output ...

angularjsangular

Unable to locate the pipe within the customized component - Ionic 3 with Lazy Loading

In my Ionic 3 project, I have organized my pipes into a pipes.module.ts file and imported it in @NgModule for all my lazy loaded pages, which works perfectly without any issues. However, when I tried using the same approach in a custom component and used ...

angularpipecomponentsionic3

Is *ngFor in Angular 4 causing extra unnecessary cycles?

Can you figure out the issue with this plunker where the counting starts at 5? http://plnkr.co/edit/n0qIlzG8TN1GXjtoFA8y?p=preview <div *ngFor="let joke of jokes"> <p>{{inc()}} - {{joke}}</p> </div> ...

angularngfor

Stop users from navigating back to specific routes by implementing route guards in Angular

I'm pondering whether it's possible to restrict users from revisiting certain routes Here's my dilemma: after a user logs in and follows the login/callback route for authentication, they can get stuck if they navigate back to that same rout ...

angular

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

cssangularanimationsass

Retrieving selected values from an ngx dropdown list

I am having trouble implementing ngx dropdown list in this way: <ngx-dropdown-list [items]="categoryItems" id="categoriesofdata" [multiSelection]="true" [placeHolder]="'Select categories'"></ngx-dropdown-list> ...

javascriptangulartypescript

Issue with displaying response data from Angular API in the template

I am retrieving categories from the backend and trying to display them in a table. However, there seems to be an issue with my code as no data is showing up in the table. Although the getFournisseurs method is successfully fetching 5 items from the backen ...

htmlangulartypescriptspringdisplay

Performing a series of Http Get requests in Angular 2 with an array that can

Seeking assistance with an Observable http sequence that involves making two dependent http calls to an api. The first call returns an Array of Urls, and the second call makes get requests for each url in the array and then returns the responses on the str ...

typescriptangularrxjsobservableangular2-http

Navigating using the Angular router occurs before any other lines of code are executed

I am encountering an unusual issue with my Angular code involving a login page that interacts with an API. login.component.ts: export class LoginComponent implements OnInit { formData; constructor(private usersService: UsersService, private router: ...

angulartypescriptangular7angular8angular-router