title: Loading JavaScript libraries and css in a typescript Angular 2 webpack project
body: <p>I've gone through the substantial effort of setting up an angular 2 project with webpack using npm to store local libraries. I have the app working but I am at a loss for how to load things like jQuery, D3 or bootstrap that I need for my project.</p>
  
  <p>I used </p>
  
  <blockquote>
    <p>npm install jquery d3 bootstrap</p>
  </blockquote>
  
  <p>etc to install the libraries locally but putting them in my vendor file doesn't do much and I cant access the d3 object or css tags from bootstrap inside my angular 2 templates.</p>
  
  <p>my vendor.ts file has these inside them </p>
  
  <pre><code>import 'jquery';
  import 'bootstrap-loader';
  </code></pre>
  
  <p>I have also tried putting </p>
  
  <pre><code>import * as d3 from 'd3/index';
  </code></pre>
  
  <p>in my component file but still dont have access to anything from my angular code. </p>
  
  <p>So basically the question how do you load libraries to the browser with angular2 and webpack?</p>
  
  <p>Edit: My loaders -></p>
  
  <pre><code>       {
              test: /\.css$/,
              include: helpers.root('src', 'app'),
              loader: 'raw'
          },
          {
              test: /\.scss$/,
              loaders: ['style', 'css', 'postcss', 'sass']
          },
          {
              test: /\.(woff2?|ttf|eot|svg)$/,
              loader: 'url?limit=10000'
          },
          {
              test: /bootstrap\/dist\/js\/umd\//,
              loader: 'imports?jQuery=jquery'
          }
  </code></pre>