Angular2: импорт внешнего js файла в компонент

Я собираюсь импортировать этот файл d3gauge.js в один из моих компонентов angular2, memmon.component.ts.

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

и в соответствующем файле шаблона добавьте

<script src="../../../../js/d3gauge.js"></script>

Но это не работает, drawGauge не может быть найден.

Итак,

Какие правильные шаги для импорта внешнего js файла в angular2?
так как я использую webpack, можно ли это сделать в webpack? Я ссылаюсь на question, решение для webpack, которое не работает для меня в результате .ensure, не может быть разрешено.

Ответы

Ответ 1

В идеале вам нужно иметь .d.ts файл для типирования, чтобы Linting работал.

Но похоже, что d3gauge не имеет одного, вы можете попросить разработчиков предоставить и надеяться, что они будут слушать.

В качестве альтернативы вы можете решить эту проблему, выполнив это

declare var drawGauge: any;

import '../../../../js/d3gauge.js';
export class MemMonComponent {
    createMemGauge() {
        new drawGauge(this.opt);  //drawGauge() is a function inside d3gauge.js
    }
}

Если вы используете его в нескольких файлах, вы можете создать файл d3gauage.d.ts с содержимым ниже

declare var drawGauge: any;

и ссылайтесь на него в файле boot.ts (bootstrap) вверху, например

///<reference path="../path/to/d3gauage.d.ts"/>

Ответ 2

После того, как вы потратили много времени на поиск своего решения, я нашел один. Для вашего удобства я использовал полный код, который вы можете заменить весь свой файл.

Это общий ответ. Скажем, вы хотите импортировать файл с именем testjs.js в свой компонент angular 2. Создайте testjs.js в папке с вашими ресурсами:

активы > testjs.js

function test(){
    alert('TestingFunction')
}

включить testjs.js в ваш 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>

В вашем app.component.ts или в любом файле component.ts, где вы хотите вызвать этот js, объявите переменную и вызовите функцию, как показано ниже:

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();
  }
}

Наконец, в app.component.html проверьте

app.component.html

<h1>
  <button (click)='f()'>Test</button>
</h1>

Ответ 3

Вместо того чтобы включить расширение файла js в index.html, вы можете включить его в файл .angular-cli-json.

Вот шаги, которые я выполнил, чтобы заставить это работать:

Сначала включите ваш внешний файл js в assets/js
В .angular-cli.json - добавьте путь к файлу под скриптами: [../app/assets/js/test.js]
В компоненте, где вы хотите использовать функции из файла js.

Вверху укажите, куда вы хотите импортировать файлы, как

declare const Test:any;

После этого вы можете получить доступ к его функциям, как, например, Test.add()

Ответ 4

Следующий подход работал в Angular 5 CLI.

Для простоты я использовал похожую демонстрацию d3gauge.js, созданную и предоставленную oliverbinns - которую вы легко найдете на Github.

Итак, во-первых, я просто создал новую папку с именем externalJS на том же уровне, что и папка активов. Затем я скопировал 2 следующих файла .js.

d3.v3.min.js
d3gauge.js

Затем я удостоверился, что обе основные директивы объявлены в основном index.html.

<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>

Затем я добавил похожий код в компонент gauge.component.ts следующим образом:

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);
    });
 }

}

и, наконец, я просто добавил div в соответствующий gauge.component.html

<div id="gaugeBox"></div>

и вуаля ! :)

Ответ 5

Вот простой способ, которым я сделал это в своем проекте.

Допустим, вам нужно использовать clipboard.min.js а в качестве примера давайте скажем, что внутри clipboard.min.js есть функция, которая называется test2().

Для использования функции test2() вам необходимо:

сделайте ссылку на файл .js внутри вас index.html.
импортируйте clipboard.min.js в ваш компонент.
объявите переменную, которая будет использовать вас для вызова функции.

Вот только соответствующие части из моего проекта (см. комментарии):

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
    }

}

Ответ 6

Вы также можете попробовать это:

import * as drawGauge from '../../../../js/d3gauge.js';

и просто new drawGauge(this.opt); в вашем тс-коде. Это решение работает в проекте с angular-cli, встроенным в laravel, над которым я сейчас работаю. В моем случае я пытаюсь импортировать библиотеку poliglot (кстати, очень хорошо для переводов) из node_modules:

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang 
{
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...
    }
    ...
}

Это решение хорошо, потому что мне не нужно копировать файлы из node_modules :).

ОБНОВИТЬ

Вы также можете посмотреть в этом СПИСОК способов, как включить libs в angular.

Ответ 7

1) Сначала вставьте путь к файлу JS в файл index.html:

<script src="assets/video.js" type="text/javascript"></script>

2) Импортируйте файл JS и объявите переменную в component.ts:

import './../../../assets/video.js';
объявить var RunPlayer: любой;

ПРИМЕЧАНИЕ. Имя переменной должно совпадать с именем функции в файле js.

3) вызов метода js в компоненте

ngAfterViewInit(){

    setTimeout(() => {
        new RunPlayer();
    });

}

Ответ 8

Допустим, вы добавили файл "xyz.js" в папку assets/js в какой-то проект Angular в Visual-Studio, и тогда самый простой способ включить этот файл - добавить его в .angular-cli.json.

"scripts": [ "assets/js/xyz.js" ],

Вы должны быть в состоянии использовать эту функциональность файла JS в вашем компоненте или файлах .ts.