Использовать внешнюю библиотеку 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

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

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

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

<html lang="en">
 <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
 </script>
 <head>
 </head>
 <body>
   <app-root></app-root>
 </body>
</html>

Добавление в angular.json или.angular-cli.json

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

добавление в компонент

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

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

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

 import { OnInit } from '@angular/core';
 declare var library: any;

в определении типа (*.d.ts). Создайте, если src/typings.d.ts не существует, в противном случае откройте его и добавьте к нему свой пакет
```
declare module 'your-library'
```