Angular Build Fails with Import Error for Icons from @ui5/webcomponents-ngx

[nnaydenow]

Angular Build Fails with Import Error for Icons from @ui5/webcomponents-ngx

When building an Angular application with ng build, I’m encountering an error related to icon imports. Specifically, the build fails with the following error:

X [ERROR] Could not resolve "@ui5/webcomponents-icons/dist/AllIcons"
    node_modules/@ui5/webcomponents-ngx/fesm2022/ui5-webcomponents-ngx-icons.mjs:32:28:
      32 │ ...) => import('@ui5/webcomponents-icons/dist/AllIcons').then(() =...
         ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./dist/AllIcons" was not found on the file system:

    node_modules/@ui5/webcomponents-icons/package.json:15:16:
      15 │     "./dist/*": "./dist/*",
         ╵                 ~~~~~~~~~~

  Import from "@ui5/webcomponents-icons/dist/AllIcons.js" to get the file "node_modules/@ui5/webcomponents-icons/dist/AllIcons.js":

    node_modules/@ui5/webcomponents-ngx/fesm2022/ui5-webcomponents-ngx-icons.mjs:32:67:
      32 │ ...'@ui5/webcomponents-icons/dist/AllIcons').then(() => 'sap-icons'),
         │                                           ^
         ╵                                           .js

  You can mark the path "@ui5/webcomponents-icons/dist/AllIcons" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.

It seems the issue occurs because imports in import { Ui5WebcomponentsIconsModule } from "@ui5/webcomponents-ngx/icons"; do not include the file extension, which leads to the build failure for missing files. All other imports from @ui5/webcomponents packages include their extensions, so this missing detail appears to be the cause of the error.

Steps to Reproduce

1. Import icons from in an Angular project.

   
   import { NgModule } from "@angular/core";
   import { Ui5WebcomponentsIconsModule } from "@ui5/webcomponents-ngx/icons";

@NgModule({ imports: [ Ui5WebcomponentsIconsModule.forRoot([ "sap-icons", "tnt-icons", "business-suite-icons" ]) ] }) export class AppModule { }

2. Run `ng build`.

### Additional information
Builder configuration in `angular.json` is set to `"builder": "@angular-devkit/build-angular:application",`

### Expected Behavior
The build should succeed without errors, correctly resolving the icons from `@ui5/webcomponents-ngx`.

### Proposed Solution
Please update the imports within https://github.com/SAP/ui5-webcomponents-ngx/blob/296501906c3b26027c638187f64c2976f350c254/libs/ui5-angular/icons/icons.module.ts#L8 to explicitly include file extensions where necessary, to match the pattern used in other imports from `@ui5/webcomponents`.

[github-actions[bot]]

Hello @nnaydenow, thank you for using ui5-webcomponents-ngx! The ui5-webcomponents-ngx team will triage your issue as soon as possible.