bischoffingston bischoffingston - 1 year ago 645
TypeScript Question

Loading javascript libraries and css in a typescript angular 2 webpack project

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.

I used

npm install jquery d3 bootstrap

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.

my vendor.ts file has these inside them

import 'jquery';
import 'bootstrap-loader';

I have also tried putting

import * as d3 from 'd3/index';

in my component file but still dont have access to anything from my angular code.

So basically the question how do you load libraries to the browser with angular2 and webpack?

Edit: My loaders ->

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'

Answer Source

You are doing right for import them, the only thing is you need loader for bootstrap fonts and css loader and plugin for jquery. I have made a angular2 webpack seed based on jquery and bootstrap you can download it and look how it works. In my seed I have a config folder where all the webpack and configurations are. Your question how you load these libraries in browser well when you are using webpack for bundling it should bundle all the external libraries also into bundle so you can have access in browser. You can configure webpack to make different files like one for the vendor vendors.js one for your app app.js one for the css app.css one for the polymorphism polly.js. there is one issue you are importing bootstrap loader isn't it bootstrap you want like bootstrap.css in that case it's like

import "bootstrap/dist/css/bootstrap.css"

Also check if webpack throwing any errors like it can not fine the modules or if it's unable to bundle because of you need a proper loader for that.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download