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

问题描述

我想在我的应用程序启动时显示一个对话框，但是即使定义为declare var $: any;，也出现错误ReferenceError: $ is not defined.该演示位于 https://stackblitz.com/edit/angular-gnwe2c

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

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

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

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'">loading</my-app>

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

更新- 这是一个有趣的行为.当我使用 https://angular-gnwe2c.stackblitz.io 首次运行应用程序时，我没有看到对话框，也没有在控制台ReferenceError中看到错误:$尚未定义，但是如果我更改代码(例如键入Enter，Stackblitz将刷新代码，然后弹出对话框！我认为当应用程序最初加载时， jQuery尚未下载，但是当我更改代码时，那时jQuery可用

解决方案

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

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

<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的软件包之前

<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>

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.

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');.

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

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)
      }
    }

  }

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

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

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

解决方案

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

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>

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屋！