0

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"
      ],
Bhrungarajni
  • 2,415
  • 11
  • 44
  • 88
  • add popper js as a third party dependency if you are using cli it will be easy to add third party js – Rahul Singh Nov 07 '17 at 08:02
  • Sorry wrong link please try [this](https://rahulrsingh09.github.io/AngularConcepts/faq) – Rahul Singh Nov 07 '17 at 08:14
  • You have an unaccepted answer here which seems to reasonably answer the question you actually asked. You should consider [accepting the answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) as it should indeed indicate the usefulness to others who may experience the same problem. If you believe there was something else that actually solved the issue, then you should explain in your own answer to the question showing exactly the process which was used to solve. – Neil Lunn Jun 14 '18 at 04:45

1 Answers1

3

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.

David Mørch
  • 179
  • 1
  • 15