Как мне внедрить / интегрировать стороннюю библиотеку в Angular 6?
Некоторые библиотеки не поддерживаются Angular, например Clappr, HashWords и т. д. Я хочу использовать их в Angular, как если бы они были библиотекой Angular. Итак, как мы можем заставить Angular поддерживать внешние библиотеки / модули?
Возможно, вы не настроите каждую библиотеку для работы с Angular. Вам просто нужно настроить его самостоятельно. Вы можете получить доступ к «узлу» в Angular, к которому вы можете подключить библиотеки, которым нужна DOM. Попробуйте это: blog.angularindepth.com/…
@Exterminator, можете ли вы поделиться ссылкой на документацию на то же самое? Мне не удалось найти документацию, чтобы сделать Angular совместимым с внешними неподдерживаемыми библиотеками или модулями.
Так или иначе, нужно ли нам использовать собственный InjectionToken и использовать внедрение зависимостей для поддержки внешних библиотек и модулей. Я на правильном пути?
вам нужно погуглить их следующим образом: 'package_name in angular', тогда он дает вам ссылку на пакет, вы можете прочитать документацию оттуда, затем загрузить ее и использовать.
Если в библиотеке нет модуля машинописного текста, выполните следующее: hackernoon.com/… Если в библиотеке НЕТ модуля TS, выполните следующее: alligator.io/angular/third-party-libraries-angular
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Для Clappr- В Angular CLI запустите команду:
npm i clappr
https://www.npmjs.com/package/clappr
Затем следуйте приведенным ниже инструкциям.
Я пробовал это, но просто установил его, и написание фрагмента не помогло. Clappr несовместим с Angular.
- Установите пакет в свой проект:
npm i clappr - Объявление типа импорта в приложение Angular:
app.component.ts
Добавьте файл библиотеки в index.html. Переменная, предоставляемая библиотекой, может использоваться в компоненте, объявив, как этот declare var Clappr: any;, вне класса компонента.
Если в библиотеке есть модуль ES6, вы можете просто импортировать его.
Если библиотека представляет собой просто файл JS, вы можете добавить файл, как если бы вы его импортируете, используя тег <script> в index.html, добавив путь к файлу js в массив скриптов в angular.json
Если типы доступны, вы можете добавить их в массив типов на typescript.json.
Вот руководство, как все это сделать.
https://nitayneeman.com/posts/how-to-add-third-party-library-in-angular-cli/
Если вам не нравится использование сторонних библиотек в качестве глобальных переменных, вы можете превратить их в inyectables. это более сложный процесс, но довольно изящный.
Вот руководство и для этого:
https://hackernoon.com/angular-providers-how-to-inject-3rd-party-library-af4a78722864
Вот как я установил в своем проекте Angular 9:
npm install clappr- Добавьте clappr в
angular.json:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"scripts": [
"node_modules/clappr/dist/clappr.min.js"
],
"styles": [
"./src/styles.css"
]
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"scripts": [
"node_modules/clappr/dist/clappr.min.js"
],
"styles": [
"./src/styles.css"
]
}
}
- Создайте файл
index.d.tsи объявите clappr как:
declare module 'clappr';
- импортируйте его в файл component.ts:
import * as Clappr from 'clappr';
установите библиотеку, которую хотите использовать, а затем используйте ее, как описано в документации.