Angular 5 include javascript files

Question

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

When i'm using SPA navigation

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.

Without being providing the relevant snippets of code it's impossible to tell you what the problem might be. Please rework your post. — user6749601
– user6749601, Commented Mar 25, 2018 at 15:35
you need to trigger manually the script which turns the plain slider into the fancy one — David
– David, Commented Mar 25, 2018 at 15:52
well I don't know. Which of your scripts is changing the slider? — David
– David, Commented Mar 25, 2018 at 15:57

David Ibl · Accepted Answer · 2018-03-25 15:09:50Z

1

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.

answered Mar 25, 2018 at 15:09

David Ibl

9115 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

David Ibl Over a year ago

What exactly does not work when you reference them this way?

user7179261 Over a year ago

if i refreshed the page, the scripts files works, but when i used the spa navigation, the scripts dosen't load !

David Ibl Over a year ago

OK. Why should they load again? When navigating in a single page nothing gets loaded again, but the data you are loading manually from a server. What should the scripts do when you navigate?

user7179261 Over a year ago

i edit my question with an exemple what should a script file do.

David Ibl Over a year ago

OK. This seems to happen when the script is fully loaded automatically. So within the script a function gets called, when the script is loaded. But this is not possible when SPA navigation is used. Then you have to trigger script contents yourself.

David · Accepted Answer · 2018-03-25 16:30:57Z

0

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();
}

edited Mar 25, 2018 at 16:30

answered Mar 25, 2018 at 16:15

David

34.6k13 gold badges90 silver badges124 bronze badges

Collectives™ on Stack Overflow

Angular 5 include javascript files

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related