All geek questions in one place

Add .js scripts to your Angular 2 project

I am creating a web application with the 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 (jqery.min.js, bootstrap.js, ...) in my component template, but if I put it in script tags, this will not work. If I run the script tag in index.html, it works, but when I go to another page, the script does not reload.

How to load scripts without script tag in a 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>
+6
source share
3 answers

If you use the Angular CLI, you can include .js files from node_modules in .angular-cli.json .

Right below the styles array and above the environmentSource you should see an array of scripts . I included some (I truncated it) JSON as a 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" } } ] }
+8
source

I think that loading script tags inside angular 2 components is not allowed, but look at this, it can help you. How to include a JavaScript file in another JavaScript file?

0
source
Tags

Scripts are not allowed in component templates. Including scripts in your index.html should make them available worldwide. It is not clear what you mean when you say that you are viewing another page, but if you are using an angular router-outlet with router-outlet , all the scripts available to you should be available.

0
source

Source: https://habr.com/ru/post/1014087/

More articles:


All Articles