Include Javascript files (jQuery, Bootstrap, etc...) on a Angular 2 Component

Question

I'm creating a SPA that have two parts. The landing page that is public and it's used to explain things about the project and to show up a login form. The other part of the application is not public and only registered users can access.

Each part of the site (Home & Dashboard) have different components. The problem I'm facing is that these component have different Javascript files that I already have bundled (home.js & dashboard.js). I've found in Internet different solutions but they do not look right to time.

Some details about the environment is that the application was scaffolded by Angular CLI so webpack is included, in case it makes easier the task.

I would like to know if there is a proper way to do it that meets Angular 2 Good practices.

Any help would be appreciated.

this may seem like an obvious question but, is there a need to distinguish which javascript file is used for what component? Can't you just bundle all the js together (and look into lazy loading if you want to reduce the initial bundle size)? — snorkpete
– snorkpete, Commented Apr 21, 2017 at 0:13

Ömer Faruk Kırlı · Accepted Answer · 2017-04-21 00:24:02Z

2

-Inside angular-cli.json there is a section called apps. Inside that there is scripts section you can import your js files there angular cli will bundle that js files into scripts.bundle.js and put it to index.html

"apps": [
{
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/hammerjs/hammer.js",
  "path_to_your_file/dashboard.js",
  "path_to_your_file/home.js"]
}

-In another way you can import them inside index.html in classic way.

I'm not sure but i imported 'hammerjs' inside app.module.ts but i think it works because it is a module which installed via npm.

import { MaterialModule } from '@angular/material';
import 'hammerjs';

like this. there is nothing more down about hammerjs. You can turn your js files to module and install them like hammerjs.

answered Apr 21, 2017 at 0:24

Ömer Faruk Kırlı

1491 gold badge2 silver badges9 bronze badges

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

2 Comments

Victor Escobar Over a year ago

Thanks a lot, I've include the files inside of the scripts section.

Ömer Faruk Kırlı Over a year ago

No problem, happy to help ^_^

Collectives™ on Stack Overflow

Include Javascript files (jQuery, Bootstrap, etc...) on a Angular 2 Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related