ReferenceError:$ 未在 Angular 中定义 [英] ReferenceError: $ is not defined in Angular

问题描述

我想在我的应用程序启动时显示一个对话框，但我收到错误 ReferenceError: $ is not defined 即使我已经像 declare var $: any; 一样定义了它代码>.演示位于 https://stackblitz.com/edit/angular-gnwe2c

I want to show a dialog box when my application starts but I am getting error ReferenceError: $ is not defined even though I have defined it like declare var $: any;. The demo is at https://stackblitz.com/edit/angular-gnwe2c

如果你检查控制台，你会看到错误.

If you check the console, you'll see the error.

我已经定义了一个 DialogComponent，它只是 dialog.component.html 中的 Bootstrap 模态.它有一个方法 showDialog 调用 Bootstrap 的 modal 方法 $(this.dialogRef.nativeElement).modal('show');.

I have defined an DialogComponent which is simply Bootstrap modal in dialog.component.html. It has a method showDialog which call's Bootstrap's modal method $(this.dialogRef.nativeElement).modal('show');.

在 app.component.html 中，我使用了 DialogComponent - <app-dialog-box #dialogBox ></app-dialog-box>.AppComponent 接受一个 Input 并根据 Input 决定是否显示对话框

In app.component.html, I am using the DialogComponent - <app-dialog-box #dialogBox ></app-dialog-box>. The AppComponent takes an Input and depending on the Input, it decides whether to show the dialog box or nott

App.component.ts

App.component.ts

ngAfterViewInit(){
    if(this.signup!=""){
      if(this.signup === "success") {
      this.showDialog("Signup was successful")
      }else if(this.signup === "error") {
        this.showDialog("Error: Signup wasn't successful")
      } else {
        this.showDialog("Unrecognised message: "+this.signup)
      }
    }

  }

在 index.html 中<my-app [signup]="'success'">加载中</my-app>

In index.html <my-app [signup]="'success'">loading</my-app>

另外，在 index.html 中，我在使用 my-app 之前加载了所有的 javascripts 和 jquery> 所以我希望 $ 应该可用.

Also, in index.html, I am loading all the javascripts and jquery before using my-app so I expect that $ should be available.

更新-这是一个有趣的行为.当我第一次使用 https://angular-gnwe2c.stackblitz.io 运行该应用程序时，我看不到对话框并在控制台中看到错误 ReferenceError: $ is not defined，但是如果我更改代码(比如输入 Enter，Stackblitz 会刷新代码并弹出对话框！我想当应用程序最初加载时，没有下载jquery，但是当我更改代码时，此时可以使用jquery

UPDATE - Here is an interesting behaviour. When I run the app for first time using https://angular-gnwe2c.stackblitz.io, I don't see the dialog box and see error in console ReferenceError: $ is not defined, But if I change the code (say type an Enter, Stackblitz refreshes the code and the dialog box pops! I think when the app is loading initially, jquery isn't downloaded but when I change the code, jquery is available at that time

推荐答案

我无法在 Stackblitz 中解决该问题，但在我的应用程序中，我能够通过更改加载脚本

I couldn't solve the issue in Stackblitz but in my application, I was able to resolve the issue by changing the order of loading of scripts

我的应用程序使用 Play 框架提供服务.原代码是

My application was being served using Play framework. The original code was

<app-root signup=@signup> 
    </app-root>

        @* Built Angular bundles *@
    <script src="@routes.Assets.versioned("ui/polyfills.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>

我改变了顺序，把 jquery 和 bootstrap 移到了 Angular 的包之前

I changed the order and moved jquery and bootstrap before Angular's package

<script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/polyfills.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>

这篇关于ReferenceError:$ 未在 Angular 中定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！