bug: TypeError: Failed to construct 'URL': Invalid base URL

[muuvmuuv]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using Angular with esbuild (application or browser-esbuild) Ionicons are not shown but instead this error.

index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:32:22)
    at getNamedUrl (icon.js:46:10)
    at getUrl2 (icon.js:27:12)
    at Icon2.loadIcon (icon.js:296:19)
    at icon.js:257:12
    at Icon2.waitUntilVisible (icon.js:291:7)
    at Icon2.connectedCallback (icon.js:255:10)
    at Icon2.connectedCallback (index.js:3115:43)
    at DefaultDomRenderer2.insertBefore (platform-browser.mjs:648:20)
    at nativeInsertBefore (core.mjs:8470:14)

I think this here is related but was for other frameworks #22924. It talks a lot about no dynamic require in ionicons but I could not find any relation to that in the docs nor to "enable" it.

Expected Behavior

No dynamic icon require.

Steps to Reproduce

1. Create new app with ionic start
2. Use Angular 16 or 17
3. Use an ion-icon standalone component anywhere
4. Use application builder (angular 17) or browser-esbuild

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.5 (/...../@ionic/cli)
Ionic Framework : @ionic/angular 7.5.4
@angular-devkit/build-angular : 17.0.0
@angular-devkit/schematics : 17.0.0
@angular/cli : 17.0.0
@ionic/angular-toolkit : 10.0.0

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.9.0 (/..../nodejs/20.9.0/bin/node)
npm : 10.1.0
OS : macOS

Additional Information

No response

[mamillastre]

I think it's because you do not import the icons with the new addIcons method. You can follow this guide: https://ionicframework.com/docs/angular/build-options#usage-with-standalone-based-applications

But with a manual import of the icons (to avoid to call the addIcons method), it does not work. I create a bug report for this specific error: ionic-team/ionicons#1302

[muuvmuuv]

Oh, I didn't know that, thanks I will try it out!

[muuvmuuv]

Ok this works but is not ideal since the name of the icon is coming from our backend so I need all available...

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.