How to import a js package in Angular 2 project?

Question

I have an Angular 2 project and I would like to add a JavaScript package called bootstrap-slider and I have trouble understanding how I am supposed integrated the package in the project.

I started by adding the package to my node_modules by adding "bootstrap-slider" under dependencies in the package.json file and running "npm install". The entry in my package looks like this:

"bootstrap-slider": "^9.2.0",

I can see that a new folder with content for the slider has been added inside of node_modules. After looking up several guides and explanations I have tried the following in my index.html in order to properly import and use the JS package. My index html now looks like this:

<!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>

I have then tried running the example code (wihtout jQuery) on their github in one of the pages on my website to no end.

<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"
>

I would like to know is how to add this JavaScript package and other packages in the future to my project. Any help is greatly appreciated!

This doesn't answer your generic question, but in your current case it's probably because the `../node_modules` directory is not accessible from outside through the browser. By the way, node is better suited for development-time dependencies, while for deployed dependencies you better use bower. The main difference is that bower tries to resolve shared sub-dependencies while npm loads a set of sub-dependencies for each dependency - independently of others. — Hubert Grzeskowiak, Sep 20 '16 at 12:23
Another probably helpful tip: you can install packages using npm from command line: `npm install --save bootstrap-slider@^9.2.0`. This will install the dependency and add it to your defined dependencies. — Hubert Grzeskowiak, Sep 20 '16 at 12:26
You're welcome. Have you tried loading the JS file directly in the browser? I bet the node_modules dir is not accessible from the web. — Hubert Grzeskowiak, Sep 20 '16 at 13:22
I think you're right. I suspect that Angular 2 has a method of important regular JS files/packes in some way, without using the script tag in html, but I cannot seem to find it. — Sina Sohi, Sep 20 '16 at 13:42
Possible duplicate of [Angular2: import external js file into component](http://stackoverflow.com/questions/37081943/angular2-import-external-js-file-into-component) — Hubert Grzeskowiak, Sep 20 '16 at 14:14
This guide might be helpful: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.mf4ki7sni — Hubert Grzeskowiak, Sep 20 '16 at 14:14

Rubms · Answer 1 · 2017-11-28T12:27:14.313

I think it is more comfortable to keep a single package manager for your projects. If still you prefer using a specific package manager for your front-end runtime dependencies, I do not recommend using bower anymore, as it is getting deprecated. Use Yarn instead.

It is perfectly possible to include styles and scripts from node_modules if you are using angular-cli to set your project up. You can edit the .angular-cli.json file in your project and add as many styles or scripts to your angular application as necessary. In order to add styles and scripts you may add them to the app.styles and app.scripts arrays respectively:

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

Angular-cli will include the styles and scripts you specify in .angular-cli.json inside the styles.bundle.js and scripts.bundle.js respectively. Both bundles will be automatically added to your Angular application for you.

score -2 · Answer 2 · answered Sep 20 '16 at 12:44

-2

I've never used bootstrap-slider, but already install many modules. Have you any error message in your Javascript console ?

Otherwise, to add module you have to do the following :

install it via npm or bower (like you have done or by execute : npm install bootstrap-slider )
import JS and CSS files in your index.html file (again, you have already done that)
import module in your module config, app.js, here is an exemple with ngRoute module :

angular .module('myApp', [ 'ngRoute' ]);

answered Sep 20 '16 at 12:44

kawai

27
8

Thank you for the reply! I get the following error and I do not understand why: "......someurl....../node_modules/bootstrap-slider/src/js/bootstrap-slider.js Failed to load resource: the server responded with a status of 404 (Not Found)". The path location should be correct. At least from "node_modules" and onwards. Btw, keep in mind it's Angular 2 I have issues with, not angular 1. – Sina Sohi Sep 20 '16 at 12:48

How to import a js package in Angular 2 project?

2 Answers2