CODEWITHSUNDEEP
javascripthtmlangularangular5
user7179261
user7179261

Reputation:

Angular 5 include javascript files

I'm using Angular 5 and I want to include my script files .js

I'm using the script tag in the index.html

When I refresh the page everything works fine, but when i'm using SPA routing my js files does not included

Here's an exemple :

If I refreshed the page

enter image description here

When i'm using SPA navigation

enter image description here

Here's index.html where i include all my script whith script tag

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="/">
    <title>Listeo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/colors/main.css" id="colors">
</head>
<body>
    <app-base></app-base>
    <script type="text/javascript" src="../assets/scripts/jquery-2.2.0.min.js"></script> 
    <script type="text/javascript" src="../assets/scripts/mmenu.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/chosen.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/slick.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/rangeslider.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/magnific-popup.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/waypoints.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/counterup.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/tooltips.min.js"></script>
    <script type="text/javascript" src="../assets/scripts/custom.js"></script>
    <script type="text/javascript" src="../assets/scripts/switcher.js"></script>
</body>
</html>

and here's the navigation bar :

<nav id="navigation" class="style-1">
    <ul id="responsive">
        <li>
            <a [routerLink]="['home']" [routerLinkActive]="['current']">Home</a>
        </li>
        <li>
            <a [routerLink]="['restaurants']" [routerLinkActive]="['current']">Restaurants</a>
        </li>
    </ul>
</nav>

When I'm using the href everything wirks fine, but with [routerLink] I'm facing the problem.

Upvotes: 0

Views: 2355

Answers (2)

David
David

Reputation: 34425

You need to manually trigger the script

From looking at the documentation ( http://rangeslider.js.org/), the way to trigger the script is

 $('input[type="range"]').rangeslider();

So what you probably need to do is trigger this in your component's ngAfterViewInit method (the one using rangeslider). This need to be in ngAfterViewInit to make sure that the dom elements have been created.

//component.ts
ngAfterViewInit()
{
   $('input[type="range"]').rangeslider();
}

Upvotes: 0

David Ibl
David Ibl

Reputation: 911

Are you using the Angular CLI? Then you can put your custom js files into .angular-cli.json

"scripts": [
    "<path_to_script",
    "<path_to_second_script"
]

Then you don't have to reference them in the index.html.

Upvotes: 1

Related Questions