No se puede llamar a una función de JS desde TypeScript en Angular 13.

26 Jul, 2023 Programación 0

Estoy intentando llamar a la siguiente función, LoadMultiSelect(), desde uno de mis componentes porque estoy utilizando una biblioteca no Angular:

https://ibnujakaria.github.io/multiple-select-js/

Esto funciona perfectamente en la consola:

new MultipleSelect('#select-multiple-language', {
  placeholder: 'Seleccionar lenguaje'
})

Y carga el componente de JS.

Más tarde, intento agregarlo en Angular, pero no puedo encontrar cómo hacerlo.

Intenté exportar la función de JS de dos formas:

export default function LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Seleccionar lenguaje'
  });
}

Y así:

LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Seleccionar lenguaje'
  });
}

var multiselect = new LoadMultiSelect();

export { multiselect };

Creé un archivo para cargar la función exportada:

assets/js/multiselect.js

Luego, lo agregué en mi build en la sección de scripts de mi angular.json de la siguiente manera:

"scripts": [
  "./node_modules/multiple-select-js/dist/js/multiple-select.js",
  "src/assets/js/multiselect.js"
]

Y luego intenté agregarlo en mi componente de esta manera:

import LoadMultiSelect from '../../../../../assets/js/multiselect';

import LoadMultiSelect from 'src/assets/js/multiselect';

Pero nada funciona, obtengo este error:

No se pudo encontrar un archivo de declaración para el módulo ‘../../../../../assets/js/multiselect’.
‘/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js’
implícitamente tiene un tipo ‘any’.

Otro, ¿alguna idea de qué estoy haciendo mal?

P.D.:

También intenté usar require, pero tampoco funcionó.
Ya probé soluciones anteriores con una versión más antigua de Angular:

https://stackoverflow.com/questions/51834966/unable-to-call-javascript-function-from-typescript-in-angular-6
https://stackoverflow.com/questions/49526681/how-to-call-javascript-functions-from-typescript-in-angular-5
https://stackoverflow.com/questions/43530096/calling-javascript-function-from-typescript-angular-2

davy.ai

July 26, 2023 at 12:22 pm

Parece que el problema radica en la forma en que estás exportando e importando la función. Aquí tienes algunas sugerencias que podrían ayudarte:

Exportar la función:

En lugar de usar export default, puedes intentar usar la palabra clave export sin la palabra clave default, así:

export function LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Seleccionar idioma'
  });
}

Importar la función:

Puedes intentar importar la función usando la siguiente sintaxis:

import { LoadMultiSelect } from 'src/assets/js/multiselect';

O, si estás usando una ruta relativa:

import { LoadMultiSelect } from '../../../assets/js/multiselect';

Usar la función:

Luego deberías poder llamar a la función en tu componente de esta manera:

ngOnInit() {
  LoadMultiSelect();
}

¡Espero que esto te ayude!

Answer

davy.ai

July 26, 2023 at 12:22 pm
Parece que el problema radica en la forma en que estás exportando e importando la función. Aquí tienes algunas sugerencias que podrían ayudarte:
1. Exportar la función:
En lugar de usar export default, puedes intentar usar la palabra clave export sin la palabra clave default, así:
```
export function LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Seleccionar idioma'
  });
}
```
1. Importar la función:
Puedes intentar importar la función usando la siguiente sintaxis:
```
import { LoadMultiSelect } from 'src/assets/js/multiselect';
```
O, si estás usando una ruta relativa:
```
import { LoadMultiSelect } from '../../../assets/js/multiselect';
```
1. Usar la función:
Luego deberías poder llamar a la función en tu componente de esta manera:
```
ngOnInit() {
  LoadMultiSelect();
}
```
¡Espero que esto te ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

No se puede llamar a una función de JS desde TypeScript en Angular 13.

Answer

davy.ai