Como posso incluir um arquivo de script JavaScript no Angular e chamar uma função desse script?

119

Eu tenho um arquivo JavaScript chamado abc.jsque tem uma função 'pública' chamada xyz(). Quero chamar essa função no meu projeto Angular. Como faço isso?

javascript angular Piyush Jain
fonte

Respostas:

105

Consulte os scripts dentro do arquivo angular-cli.json( angular.jsonao usar angular 6+).

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

em seguida, adicione typings.d.ts(crie este arquivo srcse ele ainda não existir)

declare var variableName:any;

Importe-o em seu arquivo como 

import * as variable from 'variableName';
Aravind
fonte
9
adicionei o caminho nos scripts como "scripts": ["./assets/common_header_sidebar.js"]; em seguida, em digitando.d.ts eu escrevi declare var commonHeader: any; e então em meu arquivo ts eu escrevi import * as commonHeaderModule de 'commonHeader'; mas obtendo "Não é possível localizar o módulo 'commonHeader'." erro
Piyush Jain
6
posso parecer bobo por perguntar isso. mas como o nome do arquivo no caminho (declarado em angular-cli.json) e declarando o nome do objeto no arquivo type.d.ts está relacionado. já que estou importando do nome do objeto declarado, não do arquivo
Piyush Jain
2
você pode criar um plunkerpara reproduzir
Aravind
2
feito com a integração, é só que eu tive que declarar a função no meu arquivo ts onde eu estava usando e a importação não foi necessária. Muito obrigado.
Piyush Jain
2
@Aravind e se eu não tiver o arquivo typing.d.ts no meu projeto Angular 4?
Habib
33

Para incluir uma biblioteca global, por exemplo, jquery.jsarquivo na matriz de scripts angular-cli.json( angular.jsonao usar o angular 6+):

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

Depois disso, reinicie o serviço se já estiver iniciado.

Rahul Singh
fonte
3
como você importa no arquivo typescript?
alansiqueira27
1
para importar no arquivo ts, use -declare var $: any;
ojus kulkarni
3
O arquivo angular-cli.json foi renomeado / substituído por angular.json na versão 6+ do Angular.
Ε Г И І И О
22

Adicione o arquivo js externo em index.html .

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

Este é o arquivo 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||{})

Em seguida, declare que está em um componente como abaixo

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>

Está funcionando para mim ...

Nagnath Mungade
fonte
Muito obrigado por exemplo, funcionou para mim no angular 6. Nenhuma das outras respostas funcionou.
Daniel Filipe
Fwiw, aqui estão algumas explicações do que declaresignifica - essencialmente " declareé usado para dizer ao TypeScript que a variável foi criada em outro lugar " (a partir desta resposta ).
ruffin
18

Você também pode

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

ou

import { xyz } from './abc';
xyz()
batida
fonte
26
o que devo fazer quando o arquivo está hospedado em algum lugar, mas não no repositório local?
Piyush Jain
você descobriu isso?
Luis Aceituno
Obtendo erros em ambos os métodos. Bem, eu tenho um arquivo .js no meu projeto, mas quando eu importo pelo primeiro método, ele me dá um erro na compilação e não consigo encontrar nenhum módulo quando uso o segundo método. E estou apenas usando o controle deslizante.
Habib