Estoy usando Angular 12 y quería usar archivos JavaScript personalizados en uno de mis componentes ts. Para que esto funcione, entendí que necesito agregar mi archivo custom.js a la sección "Scripts" en angular.json y declarar esto en mi componente ts:

Mi archivo custom.js

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

En la aplicación.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();

y en el archivo angular.json agregué la ruta a mi custom.js

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

Esto funciona bien y el mensaje de alerta se muestra correctamente cuando se sirve la aplicación.

Digamos que ahora quiero usar alguna biblioteca de Javascript en mi archivo custom.js, por ejemplo, "sharp":

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

Ahora, cuando sirvo la aplicación a través de "ng s", puedo ver el siguiente error en la consola de mi navegador:

 Cannot use import statement outside a module

Esto apunta a la línea "importar {sharp} desde "sharp"" de mi archivo custom.js, por supuesto.

Ya he intentado:

• agregue "tipo": "módulo" en el paquete.json pero no resolvió el problema.
• instale la dependencia aguda a través de "npm i --save @types/sharp", pero no ayudó.
• agregue un "module.exoprts" en el archivo custom.js, pero esto tampoco ayudó.

Mi pregunta entonces es la siguiente:

¿Dónde y cómo en mi proyecto Angular debo declarar la necesidad/uso de la biblioteca sharp para permitir que mi custom.js funcione?

Gracias