Menu
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>
345
Step 1: Create a js named directory inside the assets directory and put the JavaScript (nand. js) file inside it. Step 2: Open the index. html and add a script tag to add the JavaScript file.
Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript. This tutorial looks at the various aspects of Angular 2 framework which includes the basics of the framework, the setup of Angular and how to work with the various aspects of the framework.
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"
}
}
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
