javascript - cli - Angular2: importe un archivo js externo al componente
webpack angularjs (8)
Voy a importar este archivo
d3gauge.js
en uno de mis componentes
memmon.component.ts
, el archivo
memmon.component.ts
.
import ''../../../../js/d3gauge.js'';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
y en el archivo de plantilla correspondiente, agregue
<script src="../../../../js/d3gauge.js"></script>
Pero no funciona, no se puede encontrar
drawGauge
.
Asi que,
- ¿Cuáles son los pasos correctos para importar un archivo js externo a angular2?
-
Como estoy usando webpack, ¿es posible hacerlo en webpack?
Me refiero a esta
question
, la solución de paquete web no funciona para mí como resultado de
.ensureno se puede resolver.
1) Primero inserte la ruta del archivo JS en un archivo index.html :
<script src="assets/video.js" type="text/javascript"></script>
2) Importe el archivo JS y declare la variable en component.ts :
- importar ''./../../../assets/video.js'';
-
declarar var RunPlayer : cualquiera;
NOTA: El nombre de la variable debe ser el mismo que el de una función en el archivo js
3) Llame al método js en el componente
ngAfterViewInit(){
setTimeout(() => {
new RunPlayer();
});
}
Aquí hay una manera simple en que lo hice en mi proyecto.
supongamos que necesita usar
clipboard.min.js
y, por el bien del ejemplo, digamos que dentro de
clipboard.min.js
hay una función que se llama
test2()
.
Para utilizar la función test2 () necesita:
- haga una referencia al archivo .js dentro de su index.html.
-
importe
clipboard.min.jsa su componente. - declare una variable que lo usará para llamar a la función.
Aquí están solo las partes relevantes de mi proyecto (ver los comentarios):
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import(''main.js'').catch(function (err) { console.error(err); });
</script>
<!-- ************ HERE IS THE REFERENCE TO clipboard.min.js -->
<script src="app/txtzone/clipboard.min.js"></script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
app.component.ts:
import ''../txtzone/clipboard.min.js'';
declare var test2: any; // variable as the name of the function inside clipboard.min.js
@Component({
selector: ''txt-zone'',
templateUrl: ''app/txtzone/Txtzone.component.html'',
styleUrls: [''app/txtzone/TxtZone.css''],
})
export class TxtZoneComponent implements AfterViewInit {
// call test2
callTest2()
{
new test2(); // the javascript function will execute
}
}
Después de perder mucho tiempo en encontrar su solución, he encontrado una . Para su comodidad, he utilizado el código completo con el que puede reemplazar todo su archivo.
Esta es una respuesta general. Supongamos que desea importar un archivo llamado testjs.js en su componente angular 2. Cree testjs.js en su carpeta de activos:
activos> testjs.js
function test(){
alert(''TestingFunction'')
}
incluye testjs.js en tu index.html
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./assets/testjs.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
En su app.component.ts o en cualquier archivo component.ts donde desee llamar a esto, js declare una variable y llame a la función de la siguiente manera:
app.component.ts
import { Component } from ''@angular/core'';
declare var test: any;
@Component({
selector: ''app-root'',
templateUrl: ''./app.component.html'',
styleUrls: [''./app.component.css'']
})
export class AppComponent {
title = ''app works!'';
f(){
new test();
}
}
Finalmente en tu app.component.html prueba la función
app.component.html
<h1>
<button (click)=''f()''>Test</button>
</h1>
Digamos que ha agregado un archivo "xyz.js" en la carpeta assets / js en algún proyecto Angular en Visual-Studio , entonces la forma más fácil de incluir ese archivo es agregarlo a .angular-cli.json
"scripts": [ "assets/js/xyz.js" ],
Debería poder utilizar la funcionalidad de este archivo JS en sus componentes o archivos .ts.
El siguiente enfoque funcionó en Angular 5 CLI.
En aras de la simplicidad, utilicé una demostración d3gauge.js similar creada y proporcionada por oliverbinns, que puede encontrar fácilmente en Github.
Primero, simplemente creé una nueva carpeta llamada externalJS en el mismo nivel que la carpeta de activos . Luego copié los 2 siguientes archivos .js.
- d3.v3.min.js
- d3gauge.js
Luego me aseguré de declarar ambas directivas vinculadas en index.html principal
<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>
Luego agregué un código similar en un componente gauge.component.ts de la siguiente manera:
import { Component, OnInit } from ''@angular/core'';
declare var d3gauge:any; <----- !
declare var drawGauge: any; <-----!
@Component({
selector: ''app-gauge'',
templateUrl: ''./gauge.component.html''
})
export class GaugeComponent implements OnInit {
constructor() { }
ngOnInit() {
this.createD3Gauge();
}
createD3Gauge() {
let gauges = []
document.addEventListener("DOMContentLoaded", function (event) {
let opt = {
gaugeRadius: 160,
minVal: 0,
maxVal: 100,
needleVal: Math.round(30),
tickSpaceMinVal: 1,
tickSpaceMajVal: 10,
divID: "gaugeBox",
gaugeUnits: "%"
}
gauges[0] = new drawGauge(opt);
});
}
}
y finalmente, simplemente agregué un div en el gauge.component.html correspondiente
<div id="gaugeBox"></div>
et voilà! :)
En lugar de incluir su extensión de archivo
js
en
index.html
, puede incluirla en el
.angular-cli-json
.
Estos son los pasos que seguí para que esto funcione:
-
Primero incluya su archivo
jsexterno enassets/js -
En
.angular-cli.json, agregue la ruta del archivo en scripts:[../app/assets/js/test.js] -
En el componente donde desea utilizar las funciones del archivo
js.
Declare en la parte superior donde desea importar los archivos como
declare const Test:any;
Después de esto, puede acceder a sus funciones como, por ejemplo,
Test.add()
Idealmente, debe tener el archivo .d.ts para las tipificaciones para que
Linting
funcione.
Pero parece que
d3gauge
no tiene uno, puede
d3gauge
los desarrolladores que lo proporcionen y esperar que lo escuchen.
Alternativamente, puede resolver este problema específico haciendo esto
declare var drawGauge: any;
import ''../../../../js/d3gauge.js'';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
Si lo usa en varios archivos, puede crear un archivo
d3gauage.d.ts
con el contenido a continuación
declare var drawGauge: any;
y referencialo en tu
boot.ts
(bootstrap) en la parte superior, como este
///<reference path="../path/to/d3gauage.d.ts"/>
También puedes probar esto:
import * as drawGauge from ''../../../../js/d3gauge.js'';
y solo
new drawGauge(this.opt);
en su código ts.
Esta solución funciona en proyecto con angular-cli incrustado en laravel en el que estoy trabajando actualmente.
En mi caso, trato de importar la biblioteca
poliglot
(por cierto: muy buena para las traducciones) desde node_modules:
import * as Polyglot from ''../../../node_modules/node-polyglot/build/polyglot.min.js'';
...
export class Lang
{
constructor() {
this.polyglot = new Polyglot({ locale: ''en'' });
...
}
...
}
Esta solución es buena porque
no necesito COPIAR
ningún archivo de
node_modules
:).
ACTUALIZAR
También puede ver en esta LISTA de formas de incluir libs en angular.