Как импортировать пакет js в проект Angular 2?

У меня есть проект Angular 2, и я хотел бы добавить пакет JavaScript под названием bootstrap-slider, и у меня возникли проблемы с пониманием того, как я предполагаю интегрировать пакет в проект.Как импортировать пакет js в проект Angular 2?

Я начал с добавления пакета к моим node_modules, добавив «bootstrap-slider» в зависимости от зависимостей в файле package.json и запустив «npm install». Запись в моем пакете выглядит следующим образом:

"bootstrap-slider": "^9.2.0",

Я могу видеть, что новая папка с контентом для слайдера была добавлена внутри node_modules. Просмотрев несколько руководств и объяснений, я попробовал следующее в своем index.html, чтобы правильно импортировать и использовать пакет JS. Мой индекс HTML теперь выглядит следующим образом:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title><%= webpackConfig.metadata.title %></title> 

    <meta name="description" content="<%= webpackConfig.metadata.description %>"> 

    <% if (webpackConfig.htmlElements.headTags) { %> 
    <!-- Configured Head Tags --> 
    <%= webpackConfig.htmlElements.headTags %> 
    <% } %> 

    <!-- base url --> 
    <base href="<%= webpackConfig.metadata.baseUrl %>"> 
    <script src="../node_modules/bootstrap-slider/src/js/bootstrap-slider.js"></script> 
    <script> 
    System.config({ 
     paths: { 
     bootstrap-slider: ‘../node_modules/bootstrap-slider/src/js/bootstrap-slider.js’ 
     } 
    }); 
    </script> 
</head> 

<body> 
<app> 
</app> 

<div id="preloader"> 
    <div></div> 
</div> 

<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %> 
<!-- Webpack Dev Server reload --> 
<script src="/webpack-dev-server.js"></script> 
<% } %> 

<link 
    href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' 
    rel='stylesheet' type='text/css'> 
</body> 
</html>

Я тогда попытался запустить пример кода (wihtout JQuery) на их GitHub в одной из страниц на моем сайте нет конца.

<input 
    type="text" 
    name="somename" 
    data-provide="slider" 
    data-slider-ticks="[1, 2, 3]" 
    data-slider-ticks-labels='["short", "medium", "long"]' 
    data-slider-min="1" 
    data-slider-max="3" 
    data-slider-step="1" 
    data-slider-value="3" 
    data-slider-tooltip="hide" 
>

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

источник

2016-09-20 Vanquiza

Это не отвечает на ваш общий вопрос, но в вашем текущем случае это, вероятно, потому, что каталог '../ node_modules' недоступен извне через браузер. Кстати, узел лучше подходит для зависимостей времени разработки, тогда как для развернутых зависимостей лучше использовать беседку.Основное различие заключается в том, что bower пытается разрешить общие подзависимости, в то время как npm загружает набор подзависимостей для каждой зависимости - независимо от других. –

Еще один полезный совет: вы можете устанавливать пакеты с помощью npm из командной строки: 'npm install --save bootstrap-slider @^9.2.0'. Это установит зависимость и добавит ее в определенные зависимости. –

Спасибо за замечания, я буду помнить их! – Vanquiza

-2

Я никогда не пользовался бутстрапом-слайдером, но уже устанавливал множество модулей. У вас есть сообщение об ошибке на вашей консоли Javascript?

В противном случае, чтобы добавить модуль, который вы должны сделать следующее:

установить его через НПЙ или дачу (как вы сделали или выполнить: npm install bootstrap-slider)
импорт JS и CSS файлы в индексе .html файл (опять же, вы уже сделали это)
модуль импорта в модуле конфигурации, app.js, вот Exemple с модулем ngRoute:

угловой .module ('MYAPP', [ 'ngRoute' ]);

источник

2016-09-20 12:44:01 kawai

Благодарим за ответ! Я получаю следующую ошибку, и я не понимаю, почему: «...... someurl ....../node_modules/bootstrap-slider/src/js/bootstrap-slider.js Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено) ". Расположение пути должно быть правильным. По крайней мере, от «node_modules» и далее. Кстати, имейте в виду, что это угловой 2 У меня проблемы, а не угловые 1. – Vanquiza

О ... извините, вы правы, я думал об Угловом 1 ... – kawai

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

Вполне возможно включать стили и скрипты из node_modules, если вы используете angular-cli для настройки вашего проекта. Вы можете отредактировать файл .angular-cli.json в своем проекте и добавить необходимое количество стилей или скриптов в свое угловое приложение. Для того, чтобы добавить стили и скрипты, которые вы можете добавить их к app.styles и app.scripts массивы соответственно:

{ 
    ... 
    "apps": [ 
    { 
     ... 
     "styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ], 
     "scripts": ["../node_modules/bootstrap/dist/js/bootstrap.min.js"], 
    } 
    ] 
}

радиально-кли будет включать в себя стили и скрипты, заданные в .angular-cli.json внутри styles.bundle.js и scripts.bundle.js соответственно. Оба пакета будут автоматически добавлены в ваше угловое приложение для вас.

источник

2017-11-28 12:20:30 Rubms

Как импортировать пакет js в проект Angular 2?

ответ

Смежные вопросы