Use jQuery script with Angular 6 CLI project

Question

I\'m developing an application using angular 6. My application use Minton Theme . I included all theme scripts in the index.html file of my angular project. Bu

Answer 1

Here is an example I hope helps. It is not exactly what you need but I'm hopping you can find parts that will save your time:

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import { Router } from '@angular/router';
    import * as $ from 'jquery'

    import { Globals } from '../helpers/globals';

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

    export class AppComponent implements OnInit, AfterViewInit {
        title = 'dashboard-app';
        authentication = false;

        constructor(private globals: Globals) {

        }

        ngOnInit() {

            // this.helpers.logout();
            // this.router.navigate(['/login']);
        }

        ngAfterViewInit() {
            // loading templates js after dom render
            $.getScript("../plugins/custombox/dist/custombox.min.js", function () {
            });
            $.getScript("../plugins/custombox/dist/legacy.min.js", function () {
            });

            $.getScript("/assets/js/jquery.core.js", function () {
            });
            $.getScript("/assets/js/jquery.app.js", function () {
            });
        }
    }

Answer 2

The Jquery code works only in the starting page and not between routes because it is not under the angular's change detection.

You need to hook it up into the angular life cycle hooks.

Try follow this references:

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

https://www.youtube.com/watch?v=mAwqk-eIPL8

Answer 3

Try to use renavigate method of router and implement CanReuse (from 'angular/router').

router.renavigate();

And 2nd way you may try ngOnInit mehtod for selflosding the resources.

 this.ngOnInit();