cli javascript angular webpack

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,

  1. ¿Cuáles son los pasos correctos para importar un archivo js externo a angular2?
  2. 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 .ensure no 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:

  1. haga una referencia al archivo .js dentro de su index.html.
  2. importe clipboard.min.js a su componente.
  3. 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:

  1. Primero incluya su archivo js externo en assets/js
  2. En .angular-cli.json , agregue la ruta del archivo en scripts: [../app/assets/js/test.js]
  3. 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.