0

Buenas tengo la duda como puedo usar por ejemplo una variable declarada en js en un archivo externo y usarla en angular cli ejemplo:

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

archivo.js

function myFunction(){
  var variable
}

comunicar con componente.component.ts

estaba viendo muchas respuestas por ejemplo en el archivo componente importar algo asi

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

para usarlo pero no funciona el archivo componente se encuentra en otra carpeta externa.

¿quisiera saber si hay forma? de solamente llamarla o llamar a la funcion por ejemplo import variable from "archivo.js" o function

4
  • Por entender un poco mejor tu pregunta, tienes un fichero que es externo al código de Angular, y lo que quieres es utilizar "archivo.js" e importar algo de su contenido, ¿correcto? ¿Dónde está ese fichero que mencionas?
    – Sema
    Commented el 2 jul. 2018 a las 17:07
  • si son valores estáticos podes importarlos desde un json ver es.stackoverflow.com/a/163752/81450 si son funciones ahí cambia el asunto Commented el 2 jul. 2018 a las 17:10
  • El archivo js debe estar en la carpeta assets por eso lo pongo alli la ruta import * as xJS from '../../../assets/js/archivo.js'; y el archivo componente se ubicaria por ejemplo ../components/componente/componente.components.ts Commented el 2 jul. 2018 a las 17:13
  • Es conveniente usarlo en Json? para su llamado de preferencia o que es conveniente? yo sugiero es mas factible como llamarlo desde la carpeta que esta ubicado aunque es mi opinion claro estoy a sugerencias jeje por ejemplo import '../../../assets/js/archivo.js'; Commented el 2 jul. 2018 a las 17:15

1 respuesta 1

1

El archivo exterior tiene que EXPORTAR la variable o la funcion que quieres IMPORTAR.

En archivo.js

export var variable = 'variable que se exporta'

export function myFunction() {
   var variable
   return variable // O lo que quieras hacer con tu funcion :D
}

En tu componente.component.ts puedes importarlo:

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

@Component({
  selector: 'app-root',
  templateUrl: './componente.component.html',
  styleUrls: ['./componente.component.scss']
})
export class ComponenteComponent {
  constructor() {
    console.log(xJS.variable);
    console.log(xJS.myFunction());
  }

O puedes hacer

import { variable, myFunction } from '../../../assets/js/archivo.js';
@Component({
      selector: 'app-root',
      templateUrl: './componente.component.html',
      styleUrls: ['./componente.component.scss']
    })
    export class ComponenteComponent {
      constructor() {
        console.log(variable);
        console.log(myFunction());
    }
11
  • Me late tu idea lo intentare! Commented el 2 jul. 2018 a las 18:11
  • En la archivo de ts.config.json tambien debo insertar el campo "allowJs":true y algo mas? Commented el 2 jul. 2018 a las 18:14
  • Es que me marca el siguiente error antes de insertar el campo allowJs Module '../../../assets/js/archivo.js' was resolved to '/Users/xxxxx/Desktop/myapp/myapp/src/assets/js/archivo.js', but '--allowJs' is not set. PD:pongo dos veces myapp porque estoy probando en otra carpeta Commented el 2 jul. 2018 a las 18:17
  • Despues de poner el campo allowJs me dice: File 'src/assets/js/archivo.js' is not a module. alguna sugerencia? Commented el 2 jul. 2018 a las 18:22
  • Cual opción es la que estas usando...?
    – Nery Ortez
    Commented el 2 jul. 2018 a las 18:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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