CODEWITHSUNDEEP
angularbootstrap-4popper.js
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to solve the error of popper.js in console in Angular2

i installed angular ng-select, and while running the app i am getting error as 

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

Can anyone help to solve this error.

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"
      ],

Upvotes: 0

Views: 1216

Answers (1)

David Mørch
David Mørch

Reputation: 179

Since you are using angular-cli and didn't add the dependency to you anuglar-cli.json, meaning the reference doesn't get compiled into your project. So you are able to use it the package.

First you need to add the package to your package.json file.

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

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

  }
}

Or simple run

npm install popper.js --save-dev

After that step you need to take a look at your angular-cli.json file. Look at the following code and take a closer look at the "scripts" section:

{
  "$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"
      ]
    }
  ]
}

You can see that I added the path from the angular-cli.json to the location where you installed the package.

Try add that section and start up your project again.

Note: Popper.js should be included before bootstrap.

Upvotes: 3

Related Questions