[Angular] Build error on Angular v16

[maazrashid]

Hi, I'm getting build error while using this in an Angular Project. Moreover can you provide step by step guide for usage with angular applications.

`Error: export 'default' (imported as 'foundationWasm') was not found in './dist/libfoundation.browser.wasm' (possible exports: $, $a, $b, $c, $d, $e, $f, $g, $h, $i, $j, $k, $l, $m, $n, $o, $p, $q, $r, $s, A, Aa, Ab, Ac, Ad, Ae, Af, Ag, Ah, Ai, Aj, Ak, Al, Am, An, Ao, Ap, Aq, Ar, As, At, B, Ba, Bb, Bc, Bd, Be, Bf, Bg, Bh, Bi, Bj, Bk, Bl, Bm, Bn, Bo, Bp, Bq, Br, Bs, Bt, C, Ca, Cb, Cc, Cd, Ce, Cf, Cg, Ch, Ci, Cj, Ck, Cl, Cm, Cn, Co, Cp, Cq, Cr, Cs, Ct, D, Da, Db, Dc, Dd, De, Df, Dg, Dh, Di, Dj, Dk, Dl, Dm, Dn, Do, Dp, Dq, Dr, Ds, E, Ea, Eb, Ec, Ed, Ee, Ef, Eg, Eh, Ei, Ej, Ek, El, Em, En, Eo, Ep, Eq, Er, Es, F, Fa, Fb, Fc, Fd, Fe, Ff, Fg, Fh, Fi, Fj, Fk, Fl, Fm, Fn, Fo, Fp, Fq, Fr, Fs, G, Ga, Gb, Gc, Gd, Ge, Gf, Gg, Gh, Gi, Gj, Gk, Gl, Gm, Gn, Go, Gp, Gq, Gr, Gs, H, Ha, Hb, Hc, Hd, He, Hf, Hg, Hh, Hi, Hj, Hk, Hl, Hm, Hn, Ho, Hp, Hq, Hr, Hs, I, Ia, Ib, Ic, Id, Ie, If, Ig, Ih, Ii, Ij, Ik, Il, Im, In, Io, Ip, Iq, Ir, Is, J, Ja, Jb, Jc, Jd, Je, Jf, Jg, Jh, Ji, Jj, Jk, Jl, Jm, Jn, Jo, Jp, Jq, Jr, Js, K, Ka, Kb, Kc, Kd, Ke, Kf, Kg, Kh, Ki, Kj, Kk, Kl, Km, Kn, Ko, Kp, Kq, Kr, Ks, L, La, Lb, Lc, Ld, Le, Lf, Lg, Lh, Li, Lj, Lk, Ll, Lm, Ln, Lo, Lp, Lq, Lr, Ls, M, Ma, Mb, Mc, Md, Me, Mf, Mg, Mh, Mi, Mj, Mk, Ml, Mm, Mn, Mo, Mp, Mq, Mr, Ms, N, Na, Nb, Nc, Nd, Ne, Nf, Ng, Nh, Ni, Nj, Nk, Nl, Nm, Nn, No, Np, Nq, Nr, Ns, O, Oa, Ob, Oc, Od, Oe, Of, Og, Oh, Oi, Oj, Ok, Ol, Om, On, Oo, Op, Oq, Or, Os, P, Pa, Pb, Pc, Pd, Pe, Pf, Pg, Ph, Pi, Pj, Pk, Pl, Pm, Pn, Po, Pp, Pq, Pr, Ps, Q, Qa, Qb, Qc, Qd, Qe, Qf, Qg, Qh, Qi, Qj, Qk, Ql, Qm, Qn, Qo, Qp, Qq, Qr, Qs, R, Ra, Rb, Rc, Rd, Re, Rf, Rg, Rh, Ri, Rj, Rk, Rl, Rm, Rn, Ro, Rp, Rq, Rr, Rs, S, Sa, Sb, Sc, Sd, Se, Sf, Sg, Sh, Si, Sj, Sk, Sl, Sm, Sn, So, Sp, Sq, Sr, Ss, T, Ta, Tb, Tc, Td, Te, Tf, Tg, Th, Ti, Tj, Tk, Tl, Tm, Tn, To, Tp, Tq, Tr, Ts, U, Ua, Ub, Uc, Ud, Ue, Uf, Ug, Uh, Ui, Uj, Uk, Ul, Um, Un, Uo, Up, Uq, Ur, Us, V, Va, Vb, Vc, Vd, Ve, Vf, Vg, Vh, Vi, Vj, Vk, Vl, Vm, Vn, Vo, Vp, Vq, Vr, Vs, W, Wa, Wb, Wc, Wd, We, Wf, Wg, Wh, Wi, Wj, Wk, Wl, Wm, Wn, Wo, Wp, Wq, Wr, Ws, X, Xa, Xb, Xc, Xd, Xe, Xf, Xg, Xh, Xi, Xj, Xk, Xl, Xm, Xn, Xo, Xp, Xq, Xr, Xs, Y, Ya, Yb, Yc, Yd, Ye, Yf, Yg, Yh, Yi, Yj, Yk, Yl, Ym, Yn, Yo, Yp, Yq, Yr, Ys, Z, Za, Zb, Zc, Zd, Ze, Zf, Zg, Zh, Zi, Zj, Zk, Zl, Zm, Zn, Zo, Zp, Zq, Zr, Zs, _, _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, al, am, an, ao, ap, aq, ar, as, at, ba, bb, bc, bd, be, bf, bg, bh, bi, bj, bk, bl, bm, bn, bo, bp, bq, br, bs, bt, ca, cb, cc, cd, ce, cf, cg, ch, ci, cj, ck, cl, cm, cn, co, cp, cq, cr, cs, ct, da, db, dc, dd, de, df, dg, dh, di, dj, dk, dl, dm, dn, dp, dq, dr, ds, dt, ea, eb, ec, ed, ee, ef, eg, eh, ei, ej, ek, el, em, en, eo, ep, eq, er, es, et, fa, fb, fc, fd, fe, ff, fg, fh, fi, fj, fk, fl, fm, fn, fo, fp, fq, fr, fs, ft, ga, gb, gc, gd, ge, gf, gg, gh, gi, gj, gk, gl, gm, gn, go, gp, gq, gr, gs, gt, ha, hb, hc, hd, he, hf, hg, hh, hi, hj, hk, hl, hm, hn, ho, hp, hq, hr, hs, ht, ia, ib, ic, id, ie, ig, ih, ii, ij, ik, il, im, io, ip, iq, ir, is, it, ja, jb, jc, jd, je, jf, jg, jh, ji, jj, jk, jl, jm, jn, jo, jp, jq, jr, js, jt, ka, kb, kc, kd, ke, kf, kg, kh, ki, kj, kk, kl, km, kn, ko, kp, kq, kr, ks, kt, la, lb, lc, ld, le, lf, lg, lh, li, lj, lk, ll, lm, ln, lo, lp, lq, lr, ls, lt, ma, mb, mc, md, me, mf, mg, mh, mi, mj, mk, ml, mm, mn, mo, mp, mq, mr, ms, mt, na, nb, nc, nd, ne, nf, ng, nh, ni, nj, nk, nl, nm, nn, no, np, nq, nr, ns, nt, oa, ob, oc, od, oe, of, og, oh, oi, oj, ok, ol, om, on, oo, op, oq, or, os, ot, p, pa, pb, pc, pd, pe, pf, pg, ph, pi, pj, pk, pl, pm, pn, po, pp, pq, pr, ps, pt, q, qa, qb, qc, qd, qe, qf, qg, qh, qi, qj, qk, ql, qm, qn, qo, qp, qq, qr, qs, qt, r, ra, rb, rc, rd, re, rf, rg, rh, ri, rj, rk, rl, rm, rn, ro, rp, rq, rr, rs, rt, s, sa, sb, sc, sd, se, sf, sg, sh, si, sj, sk, sl, sm, sn, so, sp, sq, sr, ss, st, t, ta, tb, tc, td, te, tf, tg, th, ti, tj, tk, tl, tm, tn, to, tp, tq, tr, ts, tt, u, ua, ub, uc, ud, ue, uf, ug, uh, ui, uj, uk, ul, um, un, uo, up, uq, ur, us, ut, v, va, vb, vc, vd, ve, vf, vg, vh, vi, vj, vk, vl, vm, vn, vo, vp, vq, vr, vs, vt, w, wa, wb, wc, wd, we, wf, wg, wh, wi, wj, wk, wl, wm, wn, wo, wp, wq, wr, ws, wt, x, xa, xb, xc, xd, xe, xf, xg, xh, xi, xj, xk, xl, xm, xn, xo, xp, xq, xr, xs, xt, y, ya, yb, yc, yd, ye, yf, yg, yh, yi, yj, yk, yl, ym, yn, yo, yp, yq, yr, ys, yt, z, za, zb, zc, zd, ze, zf, zg, zh, zi, zj, zk, zl, zm, zn, zo, zp, zq, zr, zs, zt)

./node_modules/virgil-crypto/dist/libfoundation.browser.wasm - Error: Module not found: Error: Can't resolve 'a' in 'C:\Github\WebApp\node_modules\virgil-crypto\dist'`

[rstp-god]

Hello @maazrashid ! Need some additional info, package.json and how you implemented virgil crypto inside project!

[maazrashid]

Hi @rstp-god,

package.json

Attached is my package.json file.

import { VirgilCrypto } from 'virgil-crypto';
export class ChatComponent implements OnInit, OnDestroy, AfterViewInit {

  virgilCrypto = new VirgilCrypto();

  constructor(private _chatService: ChatService,
    private _twilioService: TwilioService,
    public router: Router) {
  }

  ngOnInit(): void {
    this.loadChat();
  }

  private getTextMesaages(message: any) {
    let msgBody = message.body;
    try {
      const decryptedMessage = this.virgilCrypto.decryptThenVerify(msgBody, this.channelKeys.privateKey, this.channelKeys.publicKey);
      message.decryptedMessage = decryptedMessage.toString();
    } catch (err) {
      message.decryptedMessage = "[Invalid Format]";
    }
    return message;
  }

  sendMessageToChannel() {
    if (this.chatbox && this.chatbox.trim()) {
      let encryptedMessage = this.virgilCrypto.signThenEncrypt(this.chatbox, this.channelKeys.privateKey, this.channelKeys.publicKey);
      this.CurrentChannel.sendMessage(encryptedMessage.toString('base64'));
      this.chatbox = null;
    }
  }

these are some code snippets where encryption and decryption is being done. We're using twilio for the messages and they need to be encrypted so that's that. but it's not letting me build the project after updating from version 3.2.6 -> 5.1.2. I did include the file-loader package for loading the wasm files, configure the rule in the webpack.common.js but still no joy.

[rstp-god]

@maazrashid Are you initCrypto() somewhere inside project? Cause this loads .wasm files and another modules for correct behaviour You need to do it like this

import { initCrypto, VirgilCrypto } from 'virgil-crypto';
initCrypto().then(() => {
  const virgilCrypto = new VirgilCrypto();
  const keys = virgilCrypto.generateKeys();
  const data = 'data';
  const encrypted = virgilCrypto.encrypt({ value: data, encoding: 'utf8' }, keys.publicKey);
  const decrypted = virgilCrypto.decrypt(encrypted, keys.privateKey);
  console.log(data);
  console.log(decrypted.toString());
});

try to init in every component or create separate service for this inside angular! And of course for new version of package you need to update node for 18+ version, correct node version is 20

[digiprima12]

The error you're encountering indicates that there is a problem with the import of the WebAssembly (WASM) file in your Angular project, specifically with the virgil-crypto library. The message "export 'default' (imported as 'foundationWasm') was not found" suggests that the foundationWasm is expected to be a default export, but it is not found in the specified module.

Steps to Resolve the Error

1. Check the Import Statement: Ensure that you are importing the foundationWasm correctly. According to the error message, it seems like there might be a mismatch in how the module is being imported.

   import * as foundationWasm from 'virgil-crypto/dist/libfoundation.browser.wasm';

   If foundationWasm is not a default export, you should adjust your import statement accordingly. Try importing named exports instead.

2. Check for Module Exports: Verify the exports of the WASM module. You can open the dist/libfoundation.browser.wasm file and check what is being exported. Make sure foundationWasm is indeed exported as you expect.

3. Install Dependencies: Ensure that all dependencies are correctly installed and up-to-date. Sometimes issues arise from missing or outdated dependencies.

   npm install

4. Update Webpack Configuration: Sometimes, the default Webpack configuration used by Angular may not properly handle WASM files. You can customize your Webpack configuration to handle these files.

   Create a custom-webpack.config.js file in your project root:

   const path = require('path');
   
   module.exports = {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'webassembly/experimental'
        }
      ]
    }
   };

   Then, modify your angular.json to use the custom Webpack configuration:

   {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
              "customWebpackConfig": {
                "path": "./custom-webpack.config.js"
              }
            }
          },
          "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
              "customWebpackConfig": {
                "path": "./custom-webpack.config.js"
              }
            }
          }
        }
      }
    }
   }

5. Check WASM Loader: Ensure that you have the necessary loaders configured to handle WASM files. Sometimes, including a specific WebAssembly loader can resolve the issue.

   npm install --save-dev wasm-loader

   Then, add it to your Webpack configuration:

   module.exports = {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          use: 'wasm-loader'
        }
      ]
    }
   };

Example of a Correct Setup

Here is an example of how to set up your Angular project to properly handle and import the virgil-crypto library and WASM files:

1. Install Required Packages:

   npm install virgil-crypto
   npm install --save-dev @angular-builders/custom-webpack wasm-loader

2. Create Custom Webpack Configuration:

   custom-webpack.config.js:

   module.exports = {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'webassembly/experimental',
          use: 'wasm-loader'
        }
      ]
    }
   };

3. Modify angular.json:

   {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "builder": "@angular-builders/custom-webpack:browser",
            "options": {
              "customWebpackConfig": {
                "path": "./custom-webpack.config.js"
              }
            }
          },
          "serve": {
            "builder": "@angular-builders/custom-webpack:dev-server",
            "options": {
              "customWebpackConfig": {
                "path": "./custom-webpack.config.js"
              }
            }
          }
        }
      }
    }
   }

4. Import the Module:

   Adjust your TypeScript import according to the actual exports of the WASM file. For instance:

   import { foundationWasm } from 'virgil-crypto/dist/libfoundation.browser.wasm';

   Make sure to replace { foundationWasm } with the actual named exports if foundationWasm is not a default export.

For more detailed steps and additional help with AngularJS development, you can visit Digiprima's AngularJS Development Services.

By following these steps, you should be able to resolve the import issue and properly integrate the WASM module in your Angular project. For expert assistance or to hire experienced AngularJS developers, consider partnering with Digiprima.