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? — PaulCo
– PaulCo, Commented Apr 2, 2018 at 12:04

MichaelSolati · Accepted Answer · 2017-07-07 13:07:13Z

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 7, 2017 at 13:07

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

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

3 Comments

MichaelSolati Over a year ago

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.

PaulCo Over a year ago

As an important note, you'll have to restart ng serve to effectively load the styles/scripts

PaulCo Over a year ago

A small doc is also available to avoid multiples load

Community · Accepted Answer · 2017-05-23 12:09:45Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Jan 14, 2017 at 17:35

Amir Ghezelbash

2,43719 silver badges24 bronze badges

Comments

Jordan Frankfurt · Accepted Answer · 2017-01-14 23:03:41Z

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, 2017 at 23:03

Jordan Frankfurt

3441 gold badge3 silver badges13 bronze badges

2 Comments

NightWnvol Over a year ago

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 <router-outlet> as you said. I updated the question with my app.component, app.module.ts and app.routing.module.ts.

NightWnvol Over a year ago

I noticed that if I enable the Toggle Device Toolbar (in Chrome DevTools view) the issue disappears.

Collectives™ on Stack Overflow

Add .js scripts in Angular 2 project

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related