Reload Angular 8 in js files inserted into index.html via routerLink

Asked

Viewed 205 times

0

I need to restart the angular, If I am on any other page, and I click on the routerLink, I go to the homepage normally, however, some elements that depend on javascript files or jquery libraries are not loaded, they are loaded the first time next to index.html, and after that, when browsing the route system, and returning to the homepage, it is no longer loaded.

Detailing the problem below:

I am redirected to my homepage normally, but I am using some javascript libraries that are inserted in index.html. for example:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <base href="/">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300,400,400italic,700|Oxygen:400,300,700'
    rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="shortcut icon" href="assets/img/favicons/[email protected]">

  <link rel="stylesheet" href="assets/css/foundation.min.css" />
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="stylesheet" href="assets/css/animate.css">
  <link rel="stylesheet" href="assets/css/animsition.min.css">
  <link rel="stylesheet" href="assets/css/icomoon.css" />
  <link rel="stylesheet" href="assets/css/pogo-slider.min.css">
  <link rel="stylesheet" href="assets/css/responsive.css">


  <script src="assets/js/vendor/jquery.min.js"></script>
</head>

<body>
  <app-root></app-root>
  <script src="assets/js/vendor/modernizr.js"></script>
  <script src="assets/js/vendor/what-input.min.js"></script>
  <script src="assets/js/foundation.min.js"></script>
  <script src="assets/js/foundation.js"></script>
  <script src="assets/js/plugins.js"></script>
  <script src="assets/js/functions.js"></script>
  <script src="assets/js/ajax-form.js"></script>
  <script src="assets/js/jquery.prettySocial.js"></script>


  <script src="assets/js/jquery.smooth-scroll.min.js"></script>
  <script src="assets/js/animsition.js"></script>
  <script src="assets/js/headroom.js"></script>
  <script src="assets/js/superfish.js"></script>
  <script src="assets/js/jquery.pogo-slider.min.js"></script>
  <script src="assets/js/jquery.appear.js"></script>
  <script src="assets/js/wow.js"></script>
  <script src="assets/js/jquery.ajaxchimp.js"></script>
  <script src="assets/js/jquery.magnific-popup.js"></script>
  <script src="assets/js/components-js/carousel-img.js"></script>
  <script src="assets/js/components-js/testimonial-carousel.js"></script>
  <script src="assets/js/components-js/expertise-carousel.js"></script>
  <script src="assets/js/components-js/highlight-moment.js"></script>


</body>

</html>

Then my slider component, when returning to the homepage, becomes invisible, but if I give an F5, it returns to function normally. I already tried to make modifications to the route, as I saw on the forums

imports: [ RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'}) ],

The problem, is that my solution depends on a strong Reload, something like an F5 even, to re-update all these Javascript components that I’m using.

On my homepage.component.ts, I have tried using a function with Location.Reload(), but it is in an infinite loop. I also tried to use some way to create a setInterval, give the Location Reload and destroy soon after, but still persists the infinite loop.

I’m using a paid HTML template, which has javascript files, jquery libraries for certain HTML elements, so I’m using it this way, I think it’s not the best.

angular route

  • Angular Face definitely wasn’t meant to be used with jQuery, you will have many problems with this.

  • @Leandrade I know bro, but unfortunately, we have to use this template, because it was a choice of the guys who are asking for the project, customers

  • You have to add to scripts in the angular json or angular-cli.json file instead of adding to html directly

1 answer

1


there are in my view three basic ways of slider treatment with jquery, that you can use to solve your problem the angular is one of the best frameworks to work with any more plugin because being too technical requires a lot of knowledge of typescript and other languages, there are three ways to my view: one is to use a pipe: I will show the examples through this url: https://stackblitz.com/angular/lydnlqeqood?file=src%2Fapp%2Fapp.component.html

second form: https://stackblitz.com/edit/angular-hsezw8?file=src%2Fapp%2Fcrisis-center%2Fcrisis-center.module.ts this example uses an Angular library Animation.ts

third way you can set up a javascript file together with your jquery Cdn, or download the jquery modules directly in your json angular the archive is the: href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx this file is written in javascript:

Function openNav() { Document.getElementById("myNav").classList.toggle("menu_width"); Document . querySelector(".custom_menu-btn") .classList.toggle("menu_btn-style"); }

then download npm i jquery and put it directly into the script modules for example: "node_modules/jquery/dist/jquery.min.js" in your angular.json file

Browser other questions tagged angular route

You are not signed in. Login or sign up in order to post.