Использовать внешнюю библиотеку javaScript в угловом приложении

У меня есть угловое приложение 4, и у меня есть компонент javascript, который я создал в файле javascript: timeline.js. Компонент javascript работает хорошо, но я хочу использовать его с угловым 4. Итак, я поместил свой js файл в папку assets/js/timeline.js.

В файле index.html я вызываю свой js файл с помощью <script src="assets/js/timeline.js"></script> и в app.component.ts, у меня есть:

var timeline = new Timeline("timelineVisualization")

Итак, как правило, временная шкала создается в div, которая имеет id="timelineVisualization".

Но это не работает, и у меня есть ошибка на new Timeline: не удается найти имя Timeline.

Итак, вы знаете, как я могу сделать, чтобы вызвать конструктор Timeline из timeline.js?

Ответ 1

вам просто нужно сделать

 import * as Timeline from '../assets/js/timeline.js';

Вы также можете сделать (в верхней части файла):

declare var Timeline: any;

Проверьте также ниже для хорошей практики.

Ответ 2

Просто перейдя на вышеупомянутый ответ от @Deblaton Jean-Philippe и в качестве общей хорошей практики, возможно, было бы лучше включить ваши js или другие файлы css как часть сборки вместо того, чтобы помещать их в ваш index.html.

Если вы используете связку, используйте что-то вроде этого.

  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],

Ответ 3

Попробуй это:

declare const Timeline; 

Ответ 4

Вы можете попытаться найти определения типа из:

Определенно напечатанная страница Github

Если вы не можете найти свою библиотеку, вы можете сами написать свои интерфейсы (и попытаться вывести запрос на страницу github для других разработчиков), и этот интерфейс будет действовать как файл.ts.

Вот начало

declare global {
    interface Window { 
        Timeline: any
    }
}

Ответ 5

Продвижение выше бит битвера больше

мы можем добавить библиотеку в проект по-другому

  1. Добавление в HTML

    <html lang="en">
     <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
     </script>
     <head>
     </head>
     <body>
       <app-root></app-root>
     </body>
    </html>
    
  2. Добавление в angular.json или.angular-cli.json

    "scripts": [
        "../node_modules/jsplugin/dist/js/plugin.js",
         //Other script files
     ],
    
  3. добавление в компонент

    import * as Timeline from '../assets/js/timeline.js';
    

второе - объявление имени библиотеки

  1. добавить компонент

     import { OnInit } from '@angular/core';
     declare var library: any;
    
  2. в определении типа (*.d.ts). Создайте, если src/typings.d.ts не существует, в противном случае откройте его и добавьте к нему свой пакет

    declare module 'your-library'