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

Question

我安装了angular 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"
      ],

Answer 1

由于您使用的是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。