Loading JavaScript libraries and css in a typescript Angular 2 webpack project

Question

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'
        }

Please let me know if you could resolve the issue with my seed or with the answer. — Jorawar Singh
– Jorawar Singh, Commented Aug 9, 2016 at 20:27

Jorawar Singh · Accepted Answer · 2016-08-09 20:23:30Z

1

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.

edited Aug 9, 2016 at 20:23

answered Aug 9, 2016 at 20:18

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

bischoffingston Over a year ago

In my vendor file "import" doesn't seem to do anything. I included that bootstrap line but my markup is still not showing any changes from bootstrap. The vendor file does compile though.

Jorawar Singh Over a year ago

Is that vendor file included in webpack?

bischoffingston Over a year ago

yes via webpack.common.js - >

module.exports = {     entry: {         'polyfills': './assets/js/polyfills.ts',         'vendor': './assets/js/vendor.ts',         'app': './assets/js/main.ts'     },

Jorawar Singh Over a year ago

And can you see that webpack is building vendor.js file witch have the your libraries?

bischoffingston Over a year ago

yes when I build - >vendor-d97dacfa09f7bcd8dbd2.js 3.63 kB 3, 1, 2 [emitted] vendor

|

Collectives™ on Stack Overflow

Loading JavaScript libraries and css in a typescript Angular 2 webpack project

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related