Use jQuery script with Angular 6 CLI project

jquery angular typescript angular-cli angular6

20,400

Solution 1

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

Solution 2

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

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

20,400

Randika

Updated on April 15, 2020

Comments

Randika about 4 years

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. But when I logged in or navigate between routes some jquery methods not working properly. I had to refresh page manually to make them work. Is there an fix for this?

I couldn't find any working solution yet.

Project components structure

app
-components
--footer
--left-side-bar
--header
--pages
---dashboard
----home
----accounts
---login

index.html file

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

<head>
<meta charset="utf-8">
<title>Logical Position</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/minton_theme/images/favicon.ico">

<link href="assets/minton_theme/plugins/switchery/switchery.min.css" rel="stylesheet" />
<link href="assets/minton_theme/plugins/jquery-circliful/css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<link href="assets/minton_theme/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/minton_theme/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/minton_theme/css/style.css" rel="stylesheet" type="text/css">

<script src="assets/minton_theme/js/modernizr.min.js"></script>
</head>

<body class="fixed-left widescreen">
<app-root></app-root>

<script>
var resizefunc = [];
</script>

<!-- Plugins  -->
<script src="assets/minton_theme/js/jquery.min.js"></script>
<script src="assets/minton_theme/js/popper.min.js"></script>
<!-- Popper for Bootstrap -->
<script src="assets/minton_theme/js/bootstrap.min.js"></script>
<script src="assets/minton_theme/js/detect.js"></script>
<script src="assets/minton_theme/js/fastclick.js"></script>
<script src="assets/minton_theme/js/jquery.slimscroll.js"></script>
<script src="assets/minton_theme/js/jquery.blockUI.js"></script>
<script src="assets/minton_theme/js/waves.js"></script>
<script src="assets/minton_theme/js/wow.min.js"></script>
<script src="assets/minton_theme/js/jquery.nicescroll.js"></script>
<script src="assets/minton_theme/js/jquery.scrollTo.min.js"></script>
<script src="assets/minton_theme/plugins/switchery/switchery.min.js"> 
</script>

<!-- Counter Up  -->
<script src="assets/minton_theme/plugins/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="assets/minton_theme/plugins/counterup/jquery.counterup.min.js"></script>

<!-- circliful Chart -->
<script src="assets/minton_theme/plugins/jquery-circliful/js/jquery.circliful.min.js"></script>
<script src="assets/minton_theme/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>

<!-- skycons -->
<script src="assets/minton_theme/plugins/skyicons/skycons.min.js" type="text/javascript"></script>

<!-- Page js  -->
<script src="assets/minton_theme/pages/jquery.dashboard.js" defer> 
</script>

<!-- Custom main Js -->
<script src="assets/minton_theme/js/jquery.core.js"></script>

<script src="assets/minton_theme/js/jquery.app.js"></script>
</body>

</html>

app.routing.module.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from 
'./components/pages/dashboard/dashboard.component';
import { LoginComponent } from 
'./components/pages/login/login.component';
import { UnAuthGuardService } from './guards/un-auth.guard';
import { AuthGuardService } from './guards/auth.guard';
import { AccountsComponent } from 
'./components/pages/dashboard/accounts/accounts.component';
import { ViewAccountsComponent } from 
'./components/pages/dashboard/accounts/view-accounts/view- 
accounts.component';
import { MyAccountsComponent } from 
'./components/pages/dashboard/accounts/my-accounts/my- 
accounts.component';
import { CreateAccountComponent } from 
'./components/pages/dashboard/accounts/create-account/create- 
account.component';
import { HomeComponent } from 
'./components/pages/dashboard/home/home.component';

const routes: Routes = [
{ path: 'login', component: LoginComponent, canActivate: 
[UnAuthGuardService] },
{
path: '',
component: DashboardComponent,
canActivate: [AuthGuardService],
children: [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: HomeComponent
  },
  {
    path: 'accounts',
    component: AccountsComponent,
    children: [
      {
        path: '',
        component: ViewAccountsComponent
      },
      {
        path: 'create',
        component: CreateAccountComponent
      },
      {
        path: ':username',
        component: MyAccountsComponent
      }
    ]
  }
 ]
},
 { path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})

export class AppRoutingModule { }

Ravindra Gupta almost 6 years

Yes #Rotemya, Randika follow instruction by this link medium.com/@swarnakishore/…

Harshal Yelpale over 4 years

how jQuery will work in between routes, it works only with index.html page, not in the other pages like counter.html etc.