ReferenceError:$未在Angular中定义

我的应用程序正在使用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-gnwe2cIf 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 nottApp.component.tsngAfterViewInit(){ 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 scriptsMy 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中定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！