CODEWITHSUNDEEP
javascriptangular
Victor Escobar
Victor Escobar

Reputation: 554

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

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.

Upvotes: 0

Views: 217

Answers (1)

Ömer Faruk Kırlı
Ömer Faruk Kırlı

Reputation: 149

-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.

Upvotes: 2

Related Questions