Использование внешних javascript-библиотек в angular 2 ленивом загруженном модуле, а не index.html

Поэтому я хочу включить внешнюю библиотеку JS, карандашный слайдер в случае, в мое приложение Angular 2. Я видел много учебников, которые показывают, как это можно добавить. Я сделал это успешно, но ссылаюсь на библиотеку на index.html.

Это, как вы узнаете, будет загружать библиотеку каждый раз, когда приложение будет посещено, независимо от того, посещают ли они компоненты, требующие карусели. Поскольку он довольно здоров, я хочу загрузить его там, где он нужен, который находится в ленивом загруженном модуле.

Я не пробовал, но я уверен, что я мог бы просто погрузить тег script в компонент, который его использует, но это мне не подходит.

Должен быть правильный путь. Что это??

Спасибо!

Ответ 1

Мы делаем это в одном из наших проектов, чтобы динамически загружать js-библиотеки

ScriptStore.ts, который будет содержать путь script локально или на удаленном сервере и имя, которое будет используется для динамического

import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";

declare var document: any;

@Injectable()
export class Script {

private scripts: any = {};

constructor() {
    ScriptStore.forEach((script: any) => {
        this.scripts[script.name] = {
            loaded: false,
            src: script.src
        };
    });
}

load(...scripts: string[]) {
    var promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
}

loadScript(name: string) {
    return new Promise((resolve, reject) => {
        //resolve if already loaded
        if (this.scripts[name].loaded) {
            resolve({script: name, loaded: true, status: 'Already Loaded'});
        }
        else {
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = this.scripts[name].src;
            if (script.readyState) {  //IE
                script.onreadystatechange = () => {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        this.scripts[name].loaded = true;
                        resolve({script: name, loaded: true, status: 'Loaded'});
                    }
                };
            } else {  //Others
                script.onload = () => {
                    this.scripts[name].loaded = true;
                    resolve({script: name, loaded: true, status: 'Loaded'});
                };
            }
            script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
            document.getElementsByTagName('head')[0].appendChild(script);
        }
    });
}

}

Внесите этот ScriptService туда, где он вам нужен, и загрузите js libs, как этот

this.script.load('filepicker', 'rangeSlider').then(data => {
            console.log('script loaded ', data);
        }).catch(error => console.log(error));

Ответ 2

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

Я предполагаю, что вы используете Typescript или, по крайней мере, синтаксис ES6.

Если ваша сторонняя зависимость - это модуль AMD/UMD/CommonJS

В этом случае поверх вашего файла компонента вы можете просто импортировать его.

import {SomeClassName} from "path/to/library";

Если ваш сторонний участник является глобальным модулем (например, плагин JQuery)

В этом случае вам просто нужно импортировать js файл, и он будет доступен по глобальной переменной.

import "path/to/library";

Заключение

В любом случае, вы должны проверить, есть ли уже доступная библиотека сторонних разработчиков, которая поможет вам, если вы используете Typescript.

В зависимости от вашего загрузчика модуля вам может потребоваться выполнить некоторые конфигурации до этого. Но без дополнительной информации вам сложно помочь.

Бест, jpsfs