jquery and bootstrap not work #3202

jackywang615 · 2016-11-19T03:38:47Z

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.

ng new ng2-sample
cd ng2-sample
npm install jquery --save
npm install bootstrap --save
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" ]
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.

The text was updated successfully, but these errors were encountered:

lordmat0 · 2016-11-19T18:17:38Z

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 · 2016-11-20T10:24:22Z

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

jackywang615 · 2016-11-21T13:39:08Z

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

nweldev · 2016-11-25T10:39:08Z

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.

ng new angular-todo
cd angular-todo
npm install jquery@latest --save
npm install bootstrap@next --save
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 :

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

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

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;
}

nweldev · 2016-11-28T12:56:34Z

same issue with 1.0.0-beta.19-3

xggaxlc · 2016-11-29T02:04:16Z

same issue with 1.0.0-beta.21

nweldev · 2016-12-07T10:28:06Z

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 · 2016-12-08T22:21:05Z

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

iTrout · 2016-12-14T06:13:36Z

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

valorad · 2017-01-10T05:11:01Z

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 · 2017-02-22T06:03:14Z

cnpm install xxx not work! use npm install solved!

twltony · 2017-04-14T00:41:03Z

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

eminoda · 2017-09-07T01:00:53Z

@xggaxlc why cnpm cannot work

dyl0807 · 2017-12-13T03:03:33Z

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

To translate jquery and bootstrap in typescript style.

jasonlazo · 2018-02-17T16:51:28Z

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

JB24Frames · 2018-03-28T17:52:54Z

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 · 2019-09-08T01:41:23Z

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.}

nweldev mentioned this issue Nov 25, 2016

Global Styles doesn't works with cygwin #3284

Closed

nweldev mentioned this issue Dec 7, 2016

Tracking: Documentation #2711

Closed

38 tasks

hansl closed this as completed Dec 8, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery and bootstrap not work #3202

jquery and bootstrap not work #3202

jackywang615 commented Nov 19, 2016

Please provide us with the following information:

lordmat0 commented Nov 19, 2016 •

edited

Loading

jorgeas80 commented Nov 20, 2016 •

edited

Loading

jackywang615 commented Nov 21, 2016

nweldev commented Nov 25, 2016 •

edited

Loading

nweldev commented Nov 28, 2016

xggaxlc commented Nov 29, 2016

nweldev commented Dec 7, 2016

hansl commented Dec 8, 2016

iTrout commented Dec 14, 2016

valorad commented Jan 10, 2017

xggaxlc commented Feb 22, 2017

twltony commented Apr 14, 2017

eminoda commented Sep 7, 2017

dyl0807 commented Dec 13, 2017 •

edited

Loading

jasonlazo commented Feb 17, 2018

JB24Frames commented Mar 28, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

jquery and bootstrap not work #3202

jquery and bootstrap not work #3202

Comments

jackywang615 commented Nov 19, 2016

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

lordmat0 commented Nov 19, 2016 • edited Loading

jorgeas80 commented Nov 20, 2016 • edited Loading

jackywang615 commented Nov 21, 2016

nweldev commented Nov 25, 2016 • edited Loading

OS?

Versions.

Repro steps.

The log given by the failure.

in Chrome

Workaround

Remaining issues after the workaround

@types/jquery checking

boostrap css import

nweldev commented Nov 28, 2016

xggaxlc commented Nov 29, 2016

nweldev commented Dec 7, 2016

hansl commented Dec 8, 2016

iTrout commented Dec 14, 2016

valorad commented Jan 10, 2017

xggaxlc commented Feb 22, 2017

twltony commented Apr 14, 2017

eminoda commented Sep 7, 2017

dyl0807 commented Dec 13, 2017 • edited Loading

jasonlazo commented Feb 17, 2018

JB24Frames commented Mar 28, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

lordmat0 commented Nov 19, 2016 •

edited

Loading

jorgeas80 commented Nov 20, 2016 •

edited

Loading

nweldev commented Nov 25, 2016 •

edited

Loading

dyl0807 commented Dec 13, 2017 •

edited

Loading