@ngboostrap Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. when using webpack

问题

I'm trying to get bootstrap 4 working with webpack and angular 2. From what I've read the best way to do this is to use ng-bootstrap.

I've added '@ng-bootstrap/ng-bootstrap', to my vendor list after jquery per the instructions and put in the imports in my app.module.ts file.

However when I run the app I get a ZoneSymbolError when I run it in the browser.

I've ensured my webpack.config.vendor.js has been rebuilt etc. and moving things around causes slightly different errors but none of them work properly.

Is there any example (I couldn't find one) or suggestions on how to get ng-bootstrap working with webpack?

Edit: Here's the webpack vendor area.

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',
            'bootstrap/dist/css/bootstrap.css',
            '@ng-bootstrap/ng-bootstrap',
            'es6-shim',
            'es6-promise',
            'event-source-polyfill',                
            'zone.js',
        ]
    },

And here's the error:

Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. at m (http://localhost:5000/dist/vendor.js?v=kFPeLwtbBxRH90pdzruTblX-UHexGi3YXcDeNvhxzsw:1061:2209) at Object. (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:1700:9) at webpack_require (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:660:30) at fn (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:84:20) at Object.options.path (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:993:1) at webpack_require (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:660:30) at fn (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:84:20) at Object. (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:6108:18) at webpack_require (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:660:30) at module.exports (http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:709:38) at http://localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:712:10

If I put jquery back in it says that jquery must be loaded before but it is and it still errors.

回答1:

I'm guessing by the looks of your error you're using the ASP.NET Core/Angular template. To fix it I had to remove the following line from the boot-client.ts file.

import 'bootstrap';

回答2:

To use widgets from ng-bootstrap you do not need jQuery and do not need Bootstrap's JavaScript. The only required dependency is on Bootstrap's CSS.

You are getting the error on your side since, most probably, you are including Bootstrap's JavaScript. Once again, this is not needed - the only dependency is on CSS.

You might want to have a look at the ng-bootstrap demo site that uses WebPack - if you inspect its vendor file you will notice that only Bootstrap's CSS is referenced:

import 'bootstrap/dist/css/bootstrap.css';

来源：https://stackoverflow.com/questions/42587290/ngboostrap-bootstraps-javascript-requires-jquery-jquery-must-be-included-befo

标签

ng-bootstrap