Angular - Uncaught ReferenceError: $ is not defined at Object../src/assets/dist/js/pages/dashboard2.js

Question

I am working a project using AdminLTE theme in Angular 7. When I served the App, it was blank. Then I tried to console it and I saw this error:

dashboard2.js:1 Uncaught ReferenceError: $ is not defined at Object../src/assets/dist/js/pages/dashboard2.js (dashboard2.js:1) at webpack_require (bootstrap:78) at Module../src/app/pages/dashboard/dashboard.component.ts (main.js:1444) at webpack_require (bootstrap:78) at Module../src/app/app-routing.module.ts (main.js:74) at webpack_require (bootstrap:78) at Module../src/app/app.module.ts (app.component.ts:8) at webpack_require (bootstrap:78) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:78)

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import {dashboard2} from 'src/assets/dist/js/pages/dashboard2.js';

declare var $: (arg0: any) => void;

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

export class DashboardComponent implements OnInit {

  constructor() { }

 ngOnInit() {
    window.dispatchEvent(new Event('load'));
    window.dispatchEvent(new Event('resize'));

    $(dashboard2);
    document.body.className = 'skin-blue sidebar-mini';
      }
  // tslint:disable-next-line: use-life-cycle-interface
  ngOnDestroy(): void {
    document.body.className = '';
  }

}

How do I resolve this issue.

Why would $ be defined? You're creating an Angular app, not a jQuery one. Check out the Angular docs (angular.io/docs) and see how you could do this with Angular. If you're still facing problems then, rephrase your question and show what you have tried using Angular :) — nash11

Yasser Mas Yasser Mas · Accepted Answer · 2019-08-26T00:33:42

Since AdminLTE using bootstrap and Jquery and many other dependencies, so you have to install all of this packages into your angular app, and I don't recommend to do that, better search for other dashboard compatible with angular 7,or instead forget angular app and use it as jquery app because no need for angular with this dashboard.

Angular - Uncaught ReferenceError: $ is not defined at Object../src/assets/dist/js/pages/dashboard2.js

1 Answers