Lucid doesnt work with angular apps. There seems to be a problem there

[rahpal]

Hey

This package doesnt seems to be working with angular apps.

[GGAlanSmithee]

@rahpal

This package does use a very modern style of JS in terms of module handling, so it requires a bundler configuration that handles that. I doubt this has something to do with Angular specifically. Do you have a reproduction repository that I can take a look at?

[Assiance]

I'm having the same experience. I even created a brand new angular project and then placed import { Lucid } from 'lucid-cardano'; in the app.component.ts. Everything compiles correctly but I get this error in the browser console. Thanks in advance for any help you can provide.

[rahpal]

Yep. We need an example angular app which is working with lucid. @GGAlanSmithee @alessandrokonrad

[GGAlanSmithee]

I will try to put one together! Been a looong time since I worked in angular though!

[GGAlanSmithee]

I tried to get a basic Angular 15 project working with lucid, but I'm just too unfamiliar with it, haven't touched Angular since version 2 :)

Reading this issue, https://github.com/angular/angular-cli/issues/20150, I would say it is not currently possible to use lucid in an angular app. For them to restrict experimental features (especially when they are at stage 3) is.. interesting.

[Assiance]

ok @GGAlanSmithee , thanks for looking into it. Haven't found a solution on my side either

[fisherstevenk]

I got it working doing this:

npm install --save @angular-devkit/build-webpack npm install --dev @angular-builders/custom-webpack

Create custom-webpack.config.ts in the root of your web project. This is what mine looks like:

import {Configuration} from 'webpack';
module.exports = {
  experiments: {
    topLevelAwait: true,
    asyncWebAssembly: true,
    layers: true
  },
} as Configuration;

Then modify your angular.json file.

....
"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.ts",
        "replaceDuplicatePlugins": true
      },
      // ...
    },
    // ...
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "AngularCustomWebpackConfig:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "AngularCustomWebpackConfig:build:production"
.....

The angular.json changes were from the following link, but note that I am using a "ts" file instead of a "js" file: https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config

This at least fixes the top level await issue (using Angular 14).

[GGAlanSmithee]

nice @fisherstevenk !

[fisherstevenk]

Of note, you'll get an error loading the wasm files. There is an Angular/Webpack issue causing that (since 13.1):

https://github.com/angular/angular-cli/issues/22388 https://github.com/angular/angular-cli/issues/22351

I may end up just changing the code to fix or see what others have done (vs downgrading Angular).

[fisherstevenk]

Also, I tried this with 14 and it didn't work for some reason:

https://github.com/webpack/webpack/issues/14809

[GGAlanSmithee]

I only vaguely remember, but i think it was the case that they restricted webpack customisability in recent versions of angular from what I read when investigating, but then again i can be mistaken.

[fisherstevenk]

I only vaguely remember, but i think it was the case that they restricted webpack customisability in recent versions of angular from what I read when investigating, but then again i can be mistaken.

Yeah they did. The devs said they were looking to move away from webpack so they aren't going to do anything about it. I've read a couple work arounds that people are doing, but they are mostly ugly.. mostly modifying the npm package in question (Lucid in this case).