Angular - 未捕获的 ReferenceError：$ 未在 Object../src/assets/dist/js/pages/dashboard2.js 中定义

Posted 2023-02-22

【中文标题】Angular - 未捕获的 ReferenceError：$ 未在 Object../src/assets/dist/js/pages/dashboard2.js 中定义

【英文标题】：Angular - Uncaught ReferenceError: $ is not defined at Object../src/assets/dist/js/pages/dashboard2.js

【发布时间】：2019-12-30 03:49:31

【问题描述】：

我正在使用 Angular 7 中的 AdminLTE 主题开展项目。当我提供应用程序时，它是空白的。然后我试图安慰它，我看到了这个错误：

dashboard2.js:1 Uncaught ReferenceError: $ is not defined 在 Object../src/assets/dist/js/pages/dashboard2.js (dashboard2.js:1) 在 webpack_require (bootstrap:78) 在 Module../src/app/pages/dashboard/dashboard.component.ts (main.js:1444) 在 webpack_require (bootstrap:78) 在 Module../src/app/app-routing.module.ts (main.js:74) 在 webpack_require (bootstrap:78) 在 Module../src/app/app.module.ts (app.component.ts:8) 在 webpack_require (bootstrap:78) 在模块../src/main.ts (main.ts:1) 在 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 = '';
  

我该如何解决这个问题。

【问题讨论】：

为什么要定义$？您正在创建一个 Angular 应用程序，而不是一个 jQuery 应用程序。查看 Angular 文档 (angular.io/docs) 并了解如何使用 Angular 做到这一点。如果您仍然遇到问题，请改写您的问题并展示您使用 Angular 的尝试:)

【参考方案1】：

由于 AdminLTE 使用bootstrap and Jquery and many other dependencies，因此您必须将所有这些软件包安装到您的 Angular 应用程序中，我不建议这样做，最好搜索与 Angular 7 兼容的其他仪表板，或者忘记 Angular 应用程序和将其用作 jquery 应用程序，因为此仪表板不需要角度。