title: ReferenceError: $ is not defined in Angular
body: <p>I want to show a dialog box when my application starts but I am getting error <code>ReferenceError: $ is not defined</code> even though I have defined it like <code>declare var $: any;</code>. The demo is at <a href="https://stackblitz.com/edit/angular-gnwe2c" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-gnwe2c</a></p>
  
  <p>If you check the console, you'll see the error.</p>
  
  <p>I have defined an <code>DialogComponent</code> which is simply <code>Bootstrap</code> modal in <code>dialog.component.html</code>. It has a method <code>showDialog</code> which call's <code>Bootstrap</code>'s <code>modal</code> method <code>$(this.dialogRef.nativeElement).modal('show');</code>. </p>
  
  <p>In <code>app.component.html</code>, I am using the <code>DialogComponent</code> - <code>&lt;app-dialog-box #dialogBox &gt;&lt;/app-dialog-box&gt;</code>. The <code>AppComponent</code> takes an <code>Input</code> and depending on the <code>Input</code>, it decides whether to show the dialog box or nott</p>
  
  <p>App.component.ts</p>
  
  <pre><code>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)
        }
      }
  
    }
  </code></pre>
  
  <p>In index.html
  <code>&lt;my-app [signup]="'success'"&gt;loading&lt;/my-app&gt;</code></p>
  
  <p>Also, in <code>index.html</code>, I am loading all the <code>javascripts</code> and <code>jquery</code> before using <code>my-app</code> so I expect that <code>$</code> should be available.</p>
  
  <p>UPDATE - 
  Here is an interesting behaviour. When I run the app for first time using <a href="https://angular-gnwe2c.stackblitz.io" rel="nofollow noreferrer">https://angular-gnwe2c.stackblitz.io</a>, 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</p>