कोणीय 2 प्रोजेक्ट में .js स्क्रिप्ट जोड़ें

मैं कोणीय 2 ढांचे के साथ एक वेब ऐप बना रहा हूं और मैं बाहरी टेम्पलेट (https://freehtml5.co/preview/?item=splash-free-html5-bootstrap-template-for-any-websites) का उपयोग करना चाहता हूं।कोणीय 2 प्रोजेक्ट में .js स्क्रिप्ट जोड़ें

मुझे अपने घटकों के टेम्पलेट में कुछ स्क्रिप्ट (jqery.min.js, bootstrap.js, ...) चलाने की आवश्यकता है, लेकिन अगर मैं इसे स्क्रिप्ट टैग में डालता हूं तो काम नहीं करता है। यदि मैं index.html में स्क्रिप्ट टैग चलाता हूं तो यह काम करता है लेकिन जब मैं किसी अन्य पृष्ठ स्क्रिप्ट पर ब्राउज़ करता हूं तो पुनः लोड नहीं किया जाता है।

मैं टेम्पलेट में स्क्रिप्ट टैग के बिना स्क्रिप्ट कैसे लोड कर सकता हूं ??

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>

स्रोत

2017-01-14 NightWnvol

मुझे लगता है कि कोणीय 2 घटकों के अंदर स्क्रिप्ट टैग लोड हो रहा है की अनुमति नहीं है, लेकिन इस पर एक नज़र डालें तो यह आपको मदद मिल सकती है How do I include a JavaScript file in another JavaScript file?

स्रोत

2017-01-14 17:35:10

स्क्रिप्ट टैग घटक टेम्पलेट्स में अनुमति नहीं है । अपने index.html में स्क्रिप्ट सहित उन्हें वैश्विक स्तर पर पहुंच योग्य बनाना चाहिए। जब आप कहते हैं कि आप किसी अन्य पृष्ठ पर ब्राउज़ कर रहे हैं तो यह स्पष्ट नहीं है, लेकिन यदि आप router-outlet के साथ कोणीय राउटर का उपयोग करते हैं तो आपके द्वारा आयात की जाने वाली सभी स्क्रिप्ट पहुंच योग्य होनी चाहिए।

स्रोत

2017-01-14 23:03:41 JordanFrankfurt

उत्तर के लिए धन्यवाद। जैसा कि आप देख सकते हैं कि मैंने अपने 'index.html' में स्क्रिप्ट शामिल की हैं और पहला पृष्ठ पूरी तरह से काम करता है ... समस्या तब होती है जब मैं किसी अन्य पृष्ठ पर जाता हूं जिसके लिए एक ही स्क्रिप्ट लोड करना आवश्यक होता है (लॉगिन पृष्ठ से होम पेज तक)। पृष्ठ त्रुटियों के बिना ठीक लोड करता है लेकिन स्क्रिप्ट की वजह से लोड नहीं होता है, पृष्ठ खाली रहता है। यदि मैं ब्राउज़र रीफ्रेश करता हूं तो पेज फिर से ठीक प्रदर्शित होता है। जैसा कि आपने कहा था, मैंने 'राउटर-आउटलेट>' के साथ कोणीय राउटर का उपयोग किया था। मैंने अपने 'app.component',' app.module.ts' और 'app.routing.module.ts' के साथ प्रश्न अपडेट किया। – NightWnvol

मैंने देखा कि यदि मैं 'टॉगल डिवाइस टूलबार' (क्रोम DevTools दृश्य में) सक्षम करता हूं तो समस्या गायब हो जाती है। – NightWnvol

यदि आप कोणीय सीएलआई का उपयोग कर रहे हैं तो आप अपने से अपने .angular-cli.json में .js फ़ाइलों को शामिल कर सकते हैं।

styles सरणी के नीचे और environmentSource से ऊपर आपको scripts सरणी देखना चाहिए। मैंने JSON के आपके संदर्भ के रूप में थोड़ा सा (मैंने इसे छोटा कर दिया है) शामिल किया है।

{ 
    "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" 
     } 
    } 
    ] 
}

स्रोत

2017-07-07 13:07:13 MichaelSolati

मैं एक ऐसा मुद्दा जोड़ूंगा जो एक एसपीए के साथ JQuery का उपयोग कर आएगा कि आम तौर पर JQuery और बूटस्ट्रैप अपने सभी श्रोताओं को डीओएम के प्रतिपादन पर पूरा कर देगा। चूंकि एसपीए पेज को रीफ्रेश किए बिना सामग्री लोड करते हैं, इसलिए आपको 'ngAfterViewInit' लाइफ चक्र हुक के दौरान श्रोताओं को मैन्युअल रूप से नए खींचे गए घटकों में जोड़ना पड़ सकता है। – MichaelSolati

कोणीय 2 प्रोजेक्ट में .js स्क्रिप्ट जोड़ें

उत्तर

संबंधित मुद्दे