Error when switching to esbuild in Angular CLI

[kuncevic]

Describe the bug

esbuild soon to be a default build option in Angular CLI.

Currently you can opt in for that by altering the [angular config] file (https://angular.io/guide/esbuild#updating-the-application-configuration.)

The thing is when switching to esbuild produces an error:

✘ [ERROR] Could not resolve "@shoelace-style/shoelace/dist/utilities/base-path" [plugin angular-external-packages]

    src/main.ts:4:28:
      4 │ ...asePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
        ╵                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@shoelace-style/shoelace/dist/utilities/base-path" as external to exclude it from the bundle, which will remove this error.

To Reproduce

Steps to reproduce the behavior:

1. git checkout https://github.com/kuncevic/shoelace-angular
2. go to angular.json line 25
3. change @angular-devkit/build-angular:browser to @angular-devkit/build-angular:browser-esbuild
4. yarn
5. npm start or npm build

[claviska]

Can you try with the extension?

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js'

[kuncevic]

Yeah that works, we discussed that with @KonnorRogers on discord, he also mentioned that this might be related to exportmaps. My current "moduleResolution": "node" ref: https://github.com/kuncevic/shoelace-angular/blob/master/tsconfig.json#L17.

I wonder if it is possible to make a switch to edbuild without changing an imports that way?

[KonnorRogers]

@kuncevic Unfortunately this is a bundler implementation and something we really don't have control of. It may be possible, but may require fudging the exportmaps. Regardless, most of the ecosystem is moving towards including extensions so it feels like it may be a step backwards.

[sysmat]

• for me with 18.0.0-rc.1 the same problem

1. npm install @shoelace-style/shoelace
2. Update the Angular Configuration "builder": "@angular-devkit/build-angular:application",

"styles": [
        "src/styles.scss",
        "@shoelace-style/shoelace/dist/themes/light.css"
       ],
      "scripts": [
        "@shoelace-style/shoelace/dist/shoelace.js"
      ]

3. Setting up the base path in main.ts

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/');

[BuruY]

This is what I am getting with a fresh Angular 18 install and following the docs

[plugin:vite:import-analysis] Failed to resolve import "./chunks/chunk.QL5C2XOW.js" from ".angular/vite-root/<redacted>/scripts.js". Does the file exist?

[dvGomez]

Hi, same error from my side, any idea how to fix it?

[KonnorRogers]

Either of you have a reproduction I could look at?

[Odas0R]

Either of you have a reproduction I could look at?

Can reproduce here: https://stackblitz.com/edit/stackblitz-starters-nqffke?file=src%2Fmain.ts
Angular 18

Wasted couple of hours trying to fix it but no luck. I think this is related to vite that Angular CLI leverages.

If I remember correctly, I used to not optimize the Shoelace pkg by doing optimizeDeps: { exclude ... }