@ng-bootstrap for Bootstrap 4 throws error about jquery #954

New Issue

fergalmoran · 2025-08-09T17:18:18Z

fergalmoran commented

2025-08-09 17:18:18 +00:00

Originally created by @JohnGalt1717 on 3/7/2017

When using @ng-bootsrap instead of bootstrap 3 the following error is reported in the console and bootstrap does not function properly:

if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.') }

I've updated my webpack.config.vendor.js file to this:

entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'angular2-universal', 'angular2-universal-polyfills', 'jquery', 'bootstrap/dist/css/bootstrap.css', '@ng-bootstrap/ng-bootstrap', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'zone.js', ] },

With no other changes. and done the webpack --config webpack.config.vendor.js with no errors

In the app.module.ts I have the following import: import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

and then under the @ngModule imports I have NgbModule.forRoot(), per the documentation

From what I'm reading if using @ng-bootstrap should mean that jquery isn't needed at all and I could get rid of it entirely but either way it doesn't work.

What am I doing wrong?

(Note: Plugins still has the provideplugin for jquery line in there.)

*Originally created by @JohnGalt1717 on 3/7/2017* When using @ng-bootsrap instead of bootstrap 3 the following error is reported in the console and bootstrap does not function properly: `if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.') } ` I've updated my webpack.config.vendor.js file to this: ` entry: { vendor: [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/platform-server', 'angular2-universal', 'angular2-universal-polyfills', 'jquery', 'bootstrap/dist/css/bootstrap.css', '@ng-bootstrap/ng-bootstrap', 'es6-shim', 'es6-promise', 'event-source-polyfill', 'zone.js', ] }, ` With no other changes. and done the webpack --config webpack.config.vendor.js with no errors In the app.module.ts I have the following import: import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; and then under the @ngModule imports I have NgbModule.forRoot(), per the documentation From what I'm reading if using @ng-bootstrap should mean that jquery isn't needed at all and I could get rid of it entirely but either way it doesn't work. What am I doing wrong? (Note: Plugins still has the provideplugin for jquery line in there.)

fergalmoran closed this issue

2025-08-09 17:18:18 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#954