Twitter Bootstrap Question posted in

Add .js scripts in Angular 2 project – Twitter bootstrap

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>
Tags:

3

Answers


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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 0

    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"
      }
    }
  ]
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search