Add .js scripts in Angular 2 project

Question

I am building a web app with Angular 2 framework and I want to use an external template (https://freehtml5.co/preview/?item=splash-free-html5-bootstrap-template-for-any-websites).

I need to run some scripts (jquery.min.js, bootstrap.js, ...) in my components template but if I put it into scripts tag don't work.

If I run scripts tag in index.html it works but when I browse to another page script are not reloaded.

How can I load the scripts without script tag in template??

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular2App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Facebook and Twitter integration -->
  <meta property="og:title" content="" />
  <meta property="og:image" content="" />
  <meta property="og:url" content="" />
  <meta property="og:site_name" content="" />
  <meta property="og:description" content="" />
  <meta name="twitter:title" content="" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:card" content="" />

  <!--<link href="build/main.css" rel="stylesheet">-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

  <!-- Animate.css -->
  <link rel="stylesheet" href="assets/css/animate.css">
  <!-- Icomoon Icon Fonts-->
  <link rel="stylesheet" href="assets/css/icomoon.css">
  <!-- Themify Icons-->
  <link rel="stylesheet" href="assets/css/themify-icons.css">
  <!-- Bootstrap  -->
  <link rel="stylesheet" href="assets/css/bootstrap.css">

  <!-- Magnific Popup -->
  <link rel="stylesheet" href="assets/css/magnific-popup.css">

  <!-- Owl Carousel  -->
  <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

  <!-- Theme style  -->
  <link rel="stylesheet" href="assets/css/style.css">


  // SCRIPTS THAT I NEED TO LOAD
  <!-- Modernizr JS -->
  <script src="assets/js/modernizr-2.6.2.min.js"></script>
  <!-- FOR IE9 below -->
  <!--[if lt IE 9]>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  <!-- jQuery -->
  <script src="assets/js/jquery.min.js"></script>
  <!-- jQuery Easing -->
  <script src="assets/js/jquery.easing.1.3.js"></script>
  <!-- Bootstrap -->
  <script src="assets/js/bootstrap.min.js"></script>
  <!-- Waypoints -->
  <script src="assets/js/jquery.waypoints.min.js"></script>
  <!-- Carousel -->
  <script src="assets/js/owl.carousel.min.js"></script>
  <!-- countTo -->
  <script src="assets/js/jquery.countTo.js"></script>
  <!-- Magnific Popup -->
  <script src="assets/js/jquery.magnific-popup.min.js"></script>
  <script src="assets/js/magnific-popup-options.js"></script>
  <!-- Main -->
  <script src="assets/js/main.js"></script>
  // SCRIPTS THAT I NEED TO LOAD


</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.module.ts

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: '',
        component: LoginComponent
    },
    {
        path: '**',
        component: LoginComponent
    }
];

export const routing = RouterModule.forRoot(routes);

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
}

app.component.html

<router-outlet></router-outlet>

Possible duplicate of [Angular Cli Webpack, How to add or bundle external js files?](https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files) — PaulCo, Apr 02 '18 at 12:04

score 14 · Answer 1 · answered Jul 07 '17 at 13:07

14

If you're using the Angular CLI you can include .js files from your node_modules in your .angular-cli.json.

Right under the the styles array and above the environmentSource you should see the scripts array. I've included a little bit (I've truncated it) of the JSON as reference for you.

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}

answered Jul 07 '17 at 13:07

MichaelSolati

2,847
1
17
29

I will add that an issue that will come up using JQuery with a SPA is that typically JQuery and Bootstrap will bind all their listeners on rendering of the DOM is completed. Because SPAs load content in without refreshing the page, you may need to manually add listeners to newly drawn components during the `ngAfterViewInit` life cycle hook. – MichaelSolati Jul 08 '17 at 17:33
2

As an important note, you'll have to restart ``ng serve`` to effectively load the styles/scripts – PaulCo Apr 02 '18 at 11:56
A [small doc](https://github.com/angular/angular-cli/wiki/stories-global-scripts) is also available to avoid multiples load – PaulCo Apr 02 '18 at 12:03

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

i think loading script tags inside angular 2 components is not allowed but take a look at this it may help you How do I include a JavaScript file in another JavaScript file?

edited May 23 '17 at 12:09

Community

1
1

answered Jan 14 '17 at 17:35

Amir Ghezelbash

2,195
15
24

score 0 · Answer 3 · answered Jan 14 '17 at 23:03

0

Script tags are not allowed in component templates. Including scripts in your index.html should make them globally accessible. It isn't clear what you mean when you say you're browsing to another page, but if you use the angular router with router-outlet all scripts you import should be accessible.

answered Jan 14 '17 at 23:03

Jordan Frankfurt

334
1
3
13

Thanks for answer. As you can see I have included scripts in my `index.html` and the first page works perfectly... The problem is when I route to another page which requires to load the same scripts (from login page to home page). The page loads fine without errors but because of scripts are not loaded, the page remains blank. If I refresh browser the page is displayed fine again. I used the angular router with `` as you said. I updated the question with my `app.component`, `app.module.ts` and `app.routing.module.ts`. – NightWnvol Jan 15 '17 at 20:37
I noticed that if I enable the `Toggle Device Toolbar` (in Chrome DevTools view) the issue disappears. – NightWnvol Jan 19 '17 at 17:15

Add .js scripts in Angular 2 project

3 Answers3

Linked