Cannot use import() to include external scripts in the library

[Murhaf Sousli]

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

When building the library, I get the following error

Could not resolve "../scroll-timeline.js" from "dist/ngx-scrollbar/esm2022/lib/utils/scrollbar-manager.mjs"

where the polyfill script is located inside library src directory

How To Reproduce

Reproduction repo https://github.com/MurhafSousli/ng-lib-dynamic-import-repro

1. npm i
2. ng-build

---

Just import any JS file using the dynamic import import()

@Injectable({ providedIn: 'root' })
export class ScrollbarManager {
  constructor() {
      this.initPolyfill();
  }

  async initPolyfill(): Promise<void> {
    try {
      // Dynamically import the external script
      await import('../scroll-timeline.js');
    } catch (error) {
      console.error('Error loading ScrollTimeline script:', error);
    }
  }
}

Expected Behaviour

I would like to ship the polyfill with my library

Version Information

ng-packagr:            17.1.2
@angular/compiler:     17.1.2
typescript:            5.2.2

[Joost Koehoorn]

Could you please share a runnable reproduction?

[Murhaf Sousli]

@JoostK Here is a minimal reproduction https://github.com/MurhafSousli/ng-lib-dynamic-import-repro, just run ng build

[Joost Koehoorn]

The scroll-timeline.js is not an ES module. If you enable "allowJs": true in tsconfig.json there will by a TypeScript error:

projects/test-library/src/lib/test-library.component.ts:23:20 - error TS2306: File 'C:/Downloads/ng-lib-dynamic-import-repro-main/projects/test-library/src/lib/scroll-timeline.js' is not a module.

Even if the file were to be copied you wouldn't be able to actually load it using a dynamic import.

[github-actions]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}