ReferenceError：$ 未在 Angular 中定义答案

【问题标题】：ReferenceError: $ is not defined in AngularReferenceError：$ 未在 Angular 中定义
【发布时间】：2019-02-11 09:19:23
【问题描述】：

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

如果你检查控制台，你会看到错误。

我在dialog.component.html 中定义了一个DialogComponent，它只是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: $ is not defined，但是如果我更改代码（比如输入 Enter，Stackblitz 会刷新代码并对话框弹出！我认为当应用程序最初加载时，jquery 没有下载，但是当我更改代码时，jquery 是可用的

【问题讨论】：

你的角度版本是什么
我正在使用 Angular6
试试这个方法material.angular.io/components/dialog/overview
这是一个有趣的行为。当我第一次使用https://angular-gnwe2c.stackblitz.io 运行应用程序时，我看不到对话框，并且在控制台ReferenceError: $ is not defined 中看到错误，但是如果我更改代码（比如输入 Enter，Stackblitz 会刷新代码和对话框弹出！我认为当应用程序最初加载时，jquery 没有下载，但是当我更改代码时，jquery 是可用的。
我没有使用Materialise，我使用的是Bootstrap。

标签： angular6

【解决方案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>

我改变了顺序，把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>

【讨论】：

【解决方案2】：

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

将 StackBlitz demo 从原始问题更改 - 将 boostrap 和 jquery 的导入添加到 dialog.component.ts。然后安装缺少的依赖项 - jquery、bootstrap 和 popper.js 包。

希望这会有所帮助！

【讨论】：