ReferenceError: $ is not defined in Angular

Question

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

Answer 1

It is bad practice to include scripts into index.html manually. All necessary packages should be installed via npm.

Changed StackBlitz demo from original question - added imports for boostrap and jquery into dialog.component.ts. And then installed missing dependencies - jquery, bootstrap and popper.js packages.

Hope this helps!

Answer 2

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>