0

I am building an Angular application using Angular 8 and I have noticed that when the app first opens up all the components work fine ,but when I change routes the javascript does not load again therefore components on these routes do not work

I have tried the following already: -Declaring the javascript in the angular.json file. -Declaring the scripts in the index.html file.

AND

Creating a service to load scripts dynamically: -https://stackoverflow.com/a/42766146/11067579.

I am calling the above mentioned script loading service as follows in my app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { DynamicScriptLoaderService } from '../app/services/dynamic-script-loader.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent implements OnInit {
  title = 'Look4Cars';

  constructor(private dynamicScriptLoader: DynamicScriptLoaderService) { }




  ngOnInit() {
    'use strict';
    this.startScript();

  }



  async startScript() {

    await this.dynamicScriptLoader.load('jquery', 'jquery.modernizr', 'jquery-ui.min', 'jquery.queryloader2', 'jquery.fancybox', 'mad.customselect',
      'sticky-sidebar', 'query.themepunch.revolution', 'jquery.themepunch.tools', 'owl.carousel', 'mad.tabs',
      'isotope.pkgd.min', 'instafeed.min', 'elevatezoom.min', 'plugins', 'script', 'bootstrap').then(data => {
        console.log('script loaded ', data);
      }).catch(error => console.log(error));
  }
}

Below is how I have set up my scripts array in the angular.json file :

               "scripts": [
              "src/assets/js/libs/jquery-2.2.4.min.js",
              "src/assets/js/libs/jquery.modernizr.js",
              "src/assets/js/libs/jquery-ui.min.js",
              "src/assets/plugins/jquery.queryloader2.min.js",
              "src/assets/plugins/fancybox/jquery.fancybox.min.js",
              "src/assets/plugins/mad.customselect.js",
              "src/assets/plugins/sticky-sidebar.js",
              "src/assets/plugins/revolution/js/jquery.themepunch.revolution.min5597.js",
              "src/assets/plugins/revolution/js/jquery.themepunch.tools.min5597.js",
              "src/assets/plugins/owl.carousel.min.js",
              "src/assets/plugins/mad.tabs.js",
              "src/assets/plugins/isotope.pkgd.min.js",
              "src/assets/plugins/instafeed.min.js",
              "src/assets/plugins/elevatezoom.min.js",
              "src/assets/js/plugins.js",
              "src/assets/js/script.js",
              "src/assets/plugins/bootstrap.js"
            ]

How would one get the javascript to work when changing routes and going back?

Reeyaazh
  • 1
  • 1
  • 1
    You should load third party scripts using the `scripts` array in `angular.json`. – The Head Rush Jun 21 '19 at 14:45
  • @TheHeadRush , Hi thanks for replying , I tried loading the scripts in the angular.json file ,but it does not seem to work – Reeyaazh Jun 21 '19 at 14:54
  • Happy to help. Could you edit your post to specifically show what you tried and what the actual results were, including any errors from compilation or in the browser console. – The Head Rush Jun 21 '19 at 15:30
  • @TheHeadRush Thanks , I appreciate it .I have been stuck on this for some time . I have edited my post as requested and there are actually no compilation errors in the browser console. – Reeyaazh Jun 21 '19 at 15:48

0 Answers0