如何解决Angular2中控制台中popper.js的错误

时间:2017-11-07 07:52:10

标签: angular bootstrap-4 popper.js

我安装了角度ng-select,并且在运行应用程序时出现错误

Uncaught ReferenceError: Popper is not defined
    at scripts.bundle.js:12

任何人都可以帮助解决此错误。

anuglar-cli.json:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

1 个答案:

答案 0 :(得分:3)

由于您使用的是angular-cli并且没有向您添加依赖项 anuglar-cli.json ,这意味着该引用不会被编译到您的项目中。 所以你可以使用它。

首先,您需要将软件包添加到package.json文件中。

{
  "name": "appname",
  "version": "0.0.0",
  },
  "scripts": {
  },
  "private": true,
  "dependencies": {

  },
  "devDependencies": {
    "popper.js": "^1.12.5",

  }
}

或简单运行

npm install popper.js --save-dev

在此步骤之后,您需要查看 angular-cli.json 文件。请查看以下代码,并仔细查看“脚本”部分:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "appname"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "server/public",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    }
  ]
}

您可以看到我将 angular-cli.json 中的路径添加到您安装软件包的位置。

尝试添加该部分并重新启动项目。

注意: Popper.js应该包含在bootstrap之前。