2

Como puedo llamar una función javascript de un archivo propio con funciones desde un componente de angular.

Yo cargo desde el index.html el archivo jcc.js con mis funciones inclusives esta JFecha()

Me arroja el siguiente error:

ERROR in src/app/components/footer/footer.component.ts(15,17): error TS2304: Cannot find name 'JFecha'.

Mí código:

// tslint:disable-next-line: quotemark
import { Component, OnInit } from "@angular/core";

@Component({
  // tslint:disable-next-line: quotemark
  selector: "app-footer",
  // tslint:disable-next-line: quotemark
  templateUrl: "./footer.component.html",
  // tslint:disable-next-line: quotemark
  styleUrls: ["./footer.component.css"]
})
export class FooterComponent {
  anio: string;
  constructor() {
    this.anio = JFecha();
  }
}

El HTML:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>julio.corbaz@gmail.com</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="assets/js/jcc.js"></script>
</head>

<body>
    <app-root></app-root>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</body>

Nota: JFecha es una funcion mia propia de un archivo js que se encuentra en assets/js/jcc.js

3
  • 2
    Explicate mejor para entenderte,de donde quieres llamar la funcion? y para que?
    – AS13L
    el 21 may. 2019 a las 12:43
  • 1
    Hola Julio te recomiendo hacer el recorrido del sitio y leer cómo preguntar para poder mejorar tu pregunta, además de pegar tu código como texto en lugar de una imagen, así es más fácil y tienes más posibilidades que alguien pueda ayudarte.
    – ramirozap
    el 21 may. 2019 a las 12:48
  • 1
    Muchas gracias es mi primera pregunta el 21 may. 2019 a las 13:07

2 respuestas 2

3

Primera opción

Sabiendo que todo código Javascript válido es código Typescript válido (porque Typescript es un superconjunto de Javascript), intentaría incluir ese código como un fichero .ts más:

  • renombras el fichero a jcc.ts y lo colocas dentro de src/app/utils (por ejemplo).
  • exportas las funciones de dicho fichero:

    export function JFecha () {...}
    
  • importas dicho fichero del mismo modo que cualquier otro fichero ts:

    import {JFecha} from '../utils/jcc';
    

Segunda opción

Otra solución sería decirle al compilador de Typescript que asuma que esa función existe de manera global, creando un fichero de declaración de tipos:

  • creas un fichero /src/@types/jcc.d.ts
  • declaras ahí la existencia de las funciones, extendiendo la interfaz Window:

    interface Window {
      JFecha: () => any;
    }
    
  • Typescript debería escanear todos los ficheros .d.ts y añadir estas declaraciones.
  • Cargas el fichero JS en index.html, añadiéndolo como un asset para asegurarte de que sea incluido en el build.
2
  • export function JFecha () {...} que se pone en los 3 puntos {...} el 21 may. 2019 a las 16:03
  • 1
    Se pone el fragmento de código que quieras ejecutar el 21 may. 2019 a las 16:15
0

Puedes hacer esta manera. Primero deberás añadir la palabra export delante de la función que quieres utilizar fuera del archivo, por ejemplo:

 export function JFecha() { 
    console.log("Hoy es Miércoles"); 
 } 

Una vez hecho esto debes ir al componente e importar ese archivo de la siguiente manera:

 import * as archivo from '../assets/js/jcc.js';

Finalmente mediante el objeto archivo podrás acceder a todas las funciones o variables que tengas exportadas desde el archivo desde dentro de los componentes:

archivo.JFecha(); 

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.