Include js files into components

Question

I have an admin template (with bootstrap, jQuery and jQuery plugins) and I would like to integrate it into my Angular2 project (2.1.0).

There are a lot of jQuery plugins (and js files), and I can't integrate all of them into index.html . I had to include some of them in every component.

Can you tell me how can I include an external js files into components ? (I already have this js files in /assets folder)

Answer 1

In my project, we use webpack and so it goes through 3 entry points to start my project. For example in my vendor.ts I include jquery and bootstraps javascript by adding these lines.

import 'jquery';
import 'bootstrap/dist/js/bootstrap';

In webpack I have a loader for my scss

config.module = {
loaders: [
    { test: /\.scss$/, loader: 'style!css!postcss!sass', include: path.resolve('client/scss') }
]

};

then my main.ts file imports my main.scss file by

import './scss/main.scss';

and finally in my main.scss file i have at the top to import bootstrap and font-awesome

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.min.css";

Bonus If you need font-awesome | use webpack | need the loader it's

config.module = {
loaders: [
    {
        test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file?name=assets/fonts/[name].[ext]'
    }
]

};