¿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

Respuestas:

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