Repository navigation
jquery and bootstrap not work #3202
Description
Activity
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.UPDATE: Fixed updating to last angular-cli version. It happened to me with angular-cli: 1.0.0-beta.16.
@lordmat0 yes, i'm sure jquery is included in script.bundle.js.
Same issue for me !
OS?
windows 10 x64
Versions.
angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64Repro 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 errorsboostrap 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; }same issue with 1.0.0-beta.19-3
same issue with 1.0.0-beta.21
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.
Reacted by Michael PrenticeClosing thsi as fixed. Please note we have a Bootstrap 3 setup guide in work.
Reacted by Michael Prentice and Mehul JariwalaAny timeline available or notification process for when Bootstrap 3 Setup guide completion. That will be a big help...thanks!
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.cnpm install xxx not work! use npm install solved!
Reacted by twltonyTry to install
@types/jquery(bootstrap) too.
@types/jquery --save-dev
@types/bootstrap--save-devTo translate jquery and bootstrap in typescript style.
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
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
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.
- locked and limited conversation to collaborators
on Sep 8, 2019
OS?
Versions.
Repro steps.
The log given by the failure.
Mention any other details that might be useful.