ReferenceError：$未在Angular中定义

Question

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

如果您检查控制台，您将看到错误。

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

在app.component.html，我使用的是DialogComponent - <app-dialog-box #dialogBox ></app-dialog-box>。 AppComponent采取Input并且根据Input，它决定是否显示对话框或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)
      }
    }

  }

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

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

更新 - 这是一个有趣的行为。当我第一次使用https://angular-gnwe2c.stackblitz.io运行应用程序时，我没有看到对话框并在控制台中看到错误ReferenceError：$未定义，但是如果我更改代码（比如键入一个Enter，Stackblitz刷新代码和对话框） box pops！我认为当应用程序最初加载时，jquery没有下载但是当我更改代码时，jquery当时可用

Answer 1

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

我的应用程序是使用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>

我更改了顺序并在Angular的包装之前移动了jquery和bootstrap

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

Answer 2

将脚本手动包含到index.html中是不好的做法。所有必要的软件包都应该通过npm安装。

将StackBlitz demo从原来的问题改为 - 将boostrap和jquery的进口添加到dialog.component.ts。然后安装缺少的依赖项 - jquery，bootstrap和popper.js包。

希望这可以帮助！