Angular-cli: jquery and bootstrap not work

[jackywang615]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
windows 10 x64

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
angular-cli: 1.0.0-beta.20-4
node: 7.0.0
os: win32 x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

1. >ng new ng2-sample
2. >cd ng2-sample
3. >npm install jquery --save
4. > npm install bootstrap --save
5. > change the angular-cli.json like this
   "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ]
6. > change src/app/app.component.html like this

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[lordmat0]

I followed your exact steps but could not reproduce. Am running on OSX

Are you sure jQuery is included? try console.log(jQuery.fn.jquery) in the console.

[jorgeas80]

UPDATE: Fixed updating to last angular-cli version. It happened to me with angular-cli: 1.0.0-beta.16.

[jackywang615]

@lordmat0 yes, i'm sure jquery is included in script.bundle.js.

[noelmace]

Same issue for me !

OS?

windows 10 x64

Versions.

angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64

Repro steps.

1. ng new angular-todo
2. cd angular-todo
3. npm install jquery@latest --save
4. npm install bootstrap@next --save
5. angular-cli.json

{
  "project": {
    "version": "1.0.0-beta.21",
    "name": "angular-todo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

The log given by the failure.

in Chrome

Uncaught Error: Bootstrap's JavaScript requires jQuery(…)364 @ scripts.bundle.js:20__webpack_require__ @ inline.bundle.js:53679 @ scripts.bundle.js:48__webpack_require__ @ inline.bundle.js:53webpackJsonpCallback @ inline.bundle.js:24(anonymous function) @ scripts.bundle.js:1
main.bundle.js:415 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

In scripts.bundle.js, jQuery is included :

var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */

Workaround

The problem is that jQuery create the window.$ var, but not a window.jQuery var (which is expected by bootstrap). Same issue for Tether.

The following workaround seems to work :

1. install @types/jquery and @types/tether (@types/jquery may need to install jquery@^2.0.34 instead of [email protected], which seems to work fine with bootstrap 4)
2. in angular-cli.json, replace apps[0].scripts by :

"scripts": [
        "vendor.ts",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

1. create the vendor.ts file as follow :

import * as jquery from 'jquery';
window['jQuery'] = window['$'] = jquery;

import * as tether from 'tether';
window['Tether'] = tether;

see #2760

Remaining issues after the workaround

@types/jquery checking

The @types/jquery/index.d.ts give the following tslint errors, and I didn't found how to ignore this file via tslint.json :

[default] C:\Documents and Settings\nmace\dev\architecture\angular-todo\node_modules\@types\jquery\index.d.ts:3248:5
    Duplicate identifier 'export='.
[default] C:\Users\nmace\dev\architecture\angular-todo\node_modules\@types\jquery\index.d.ts:625:5
    Duplicate string index signature.
[default] C:\Users\nmace\dev\architecture\angular-todo\node_modules\@types\jquery\index.d.ts:2874:5
    Duplicate string index signature.
[default] C:\Users\nmace\dev\architecture\angular-todo\node_modules\@types\jquery\index.d.ts:2875:5
    Duplicate number index signature.
[default] C:\Users\nmace\dev\architecture\angular-todo\node_modules\@types\jquery\index.d.ts:3248:5
    Duplicate identifier 'export='.
[default] Checking finished with 5 errors

boostrap css import

The bootstrap's css isn't available in the app.component.js, even if it's included in styles.bundle.js and apparently correctly imported.
In fact, none of the global styles files work !

angular-cli.json apps[0].styles is :

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

and if write this in styles.css, nothing ...

body {
    color: red;
}

[noelmace]

same issue with 1.0.0-beta.19-3

[xggaxlc]

same issue with 1.0.0-beta.21

[noelmace]

The problem seems to be resolved with beta.22-1 ! I replaced my previous workaround with the angular-cli.json scripts configuration shown in the README, and all seems to work fine now. I think we can close the issue.

[hansl]

Closing thsi as fixed. Please note we have a Bootstrap 3 setup guide in work.

[iTrout]

Any timeline available or notification process for when Bootstrap 3 Setup guide completion. That will be a big help...thanks!

[valorad]

Same issue on Beta 24 on node v7.4.0 on OS X 10.2.2.

My angular-cli.json has been configured as

"scripts": [

        "../node_modules/jquery/dist/jquery.slim.js",

        "../node_modules/tether/dist/js/tether.min.js",

        "../node_modules/bootstrap/dist/js/bootstrap.min.js"

      ],
...

But I get errors when the page loaded, and neither jquery nor tether work.
Only bootstrap is loaded, because it is bootstrap who report errors.

[xggaxlc]

cnpm install xxx not work! use npm install solved!

[twltony]

@xggaxlc Thank you! it works for my case, since we use cnpm You save my life!

[eminoda]

@xggaxlc why cnpm cannot work

[dyl0807]

Try to install @types/jquery(bootstrap) too.
@types/jquery --save-dev
@types/bootstrap--save-dev

To translate jquery and bootstrap in typescript style.

[jasonlazo]

You have to turn off the service completly and turn on it again apparently the angular-cli.json is not update when you edit it

[jBC006-learner]

Angular CLI: 1.6.5
Node: 8.9.4
OS: darwin x64
Angular:
...
problem is:
it worked till last night ..
now all of sudden Terminal of my MaC throws 404 Error..bootstrap@3 not found
now unable to run my angular project generated
guide me if anyone able to resolve this..

thank you

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}