¿Cómo incluyo un archivo de script JavaScript en Angular y llamo a una función desde ese script?

119

Tengo un archivo JavaScript llamado abc.jsque tiene una función 'pública' llamada xyz(). Quiero llamar a esa función en mi proyecto Angular. ¿Cómo puedo hacer eso?

javascript angular

— Piyush Jain
fuente

105

Consulte los scripts dentro del archivo angular-cli.json( angular.jsoncuando use angular 6+).

"scripts": [
    "../path" 
 ];

luego agrega typings.d.ts (cree este archivo srcsi aún no existe)

declare var variableName:any;

Importarlo en su archivo como

import * as variable from 'variableName';

— Aravind
fuente

9

agregué una ruta en los scripts como "scripts": ["./assets/common_header_sidebar.js"]; luego, al escribir.d.ts escribí declare var commonHeader: any; y luego en mi archivo ts escribí import * como commonHeaderModule de 'commonHeader'; pero aparece "No se puede encontrar el módulo 'commonHeader'". error

— Piyush Jain

6

Podría sonar tonto por preguntar esto. pero cómo se relaciona el nombre del archivo en la ruta (declarado en angular-cli.json) y la declaración del nombre del objeto en el archivo typing.d.ts. ya que estoy importando desde el nombre del objeto declarado, no desde el archivo

— Piyush Jain

2

¿Puedes crear un plunkerpara reproducir

— Aravind

2

Hecho con la integración, es solo que tuve que declarar la función en mi archivo ts donde la estaba usando y la importación no era necesaria. Gracias una tonelada .

— Piyush Jain

2

@Aravind, ¿qué pasa si no tengo el archivo typing.d.ts en mi proyecto de Angular 4?

— Habib

33

Para incluir una biblioteca global, por ejemplo, un jquery.jsarchivo en la matriz de scripts de angular-cli.json( angular.jsoncuando se usa angular 6+):

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

Después de esto, reinicie ng serve si ya se inició.

— Rahul Singh
fuente

3

¿Cómo se importa en el archivo mecanografiado?

— alansiqueira27

1

para importar en el uso de archivos ts -declare var $: any;

— ojus kulkarni

3

El archivo angular-cli.json ha sido renombrado / reemplazado por angular.json en la versión 6+ de Angular.

— Ε Г И І И О

22

Agregue un archivo js externo en index.html .

<script src="./assets/vendors/myjs.js"></script>

Aquí está el archivo myjs.js :

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

Luego declare que está en un componente como el siguiente

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

Me está funcionando ...

— Nagnath Mungade
fuente

Un ejemplo muy completo gracias, funcionó para mí en angular 6. Ninguna de las otras respuestas funcionó.

— Daniel Filipe

Fwiw, aquí hay algunas explicaciones de lo que declarehace , esencialmente " declarese usa para decirle a TypeScript que la variable se ha creado en otro lugar " (de esta respuesta ).

— ruffin

18

Tu también puedes

import * as abc from './abc';
abc.xyz();

o

import { xyz } from './abc';
xyz()

— choque
fuente

26

¿Qué se supone que debo hacer cuando el archivo está alojado en algún lugar pero no en el repositorio local?

— Piyush Jain

¿Descubriste esto?

— Luis Aceituno

Obteniendo errores en ambos métodos. Bueno, tengo un archivo .js en mi proyecto, pero cuando importo por el primer método, me da un error en la compilación y no puedo encontrar ningún módulo cuando uso el segundo método. Y solo estoy usando un deslizador deslizante.

— Habib