I am using Angular 12 and I wanted to use custom JavaScript files in one of my ts components. To get this working I understood I need to add my custom.js file to the "Scripts" section in the angular.json and declare this in my ts component:

My custom.js file

function test() {
      alert("Hello!");

}

In the app.component.ts

import { Component, OnInit } from "@angular/core";
import { Subject, Observable } from "rxjs";
declare function test(): void;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
....
...
test();

and in the angular.json file i added the path to my custom.js

.....
   "scripts": [
              "src/assets/js/custom.js"]
.....

This works fine and the alert message is displayed correctly when de app is served.

Let say now I want to use some Javascript library in my custom.js file, for example "sharp":

import {sharp} from "sharp";

function test() {
  alert("Hello!");
  const image = sharp("file.jpg");
}

Now when I serve the app via the "ng s", I can see the following error in the console of my browser:

Cannot use import statement outside a module

This points to the "import {sharp} from "sharp"" line of my custom.js file of course.

I have alreayd tried to:

• add "type":"module" in the package.json but it did not solve the problem.
• install the sharp dependency via "npm i --save @types/sharp", but it did not help.
• add a "module.exoprts" in the custom.js file, but this also did not help.

My question is then the following:

where and how in my Angular project should I declare the need/use of the sharp library in order to let my custom.js work?

Thanks