@ngboostrap Bootstrap的JavaScript需要jQuery.在Bootstrap的JavaScript之前必须包含jQuery.使用webpack时 [英] @ngboostrap Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. when using webpack

问题描述

我正在尝试使Bootstrap 4与Webpack和angular 2一起使用.据我所知，最好的方法是使用ng-bootstrap.

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.

我已按照说明在jquery之后将"@ ng-bootstrap/ng-bootstrap"添加到我的供应商列表中，并将导入内容放入我的app.module.ts文件中.

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.

但是，当我运行该应用程序时，在浏览器中运行该应用程序时会出现ZoneSymbolError.

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

我已经确保我的webpack.config.vendor.js已被重建等.并且四处移动会导致略有不同的错误，但是它们均无法正常工作.

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.

是否有任何示例(我找不到一个)或有关如何使ng-bootstrap与webpack一起使用的建议?

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

这是Webpack供应商区域.

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',
        ]
    },

这是错误:

错误:Bootstrap的JavaScript需要jQuery.在Bootstrap的JavaScript之前必须包含jQuery.在m( http://localhost:5000/dist/vendor .js?v = kFPeLwtbBxRH90pdzruTblX-UHexGi3YXcDeNvhxzsw:1061:2209 ). ( http://localhost:5000/dist /main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:1700:9 )，位于 webpack_require ( http: //Object.options.path中的//localhost:5000/dist/main-client.js?v=RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:84:20 )( 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:6108:18 )，位于 webpack_require ( http://localhost:5000/dist/main-client.js?v = RLXNCyPanqpzRmxUCWX-fr4myBJMfSl5_2XrNSlvG-E:709:38 )在

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

如果我将jquery放回去，它说必须先加载jquery，但它仍然存在，并且仍然会出错.

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

推荐答案

我正在通过使用ASP.NET Core/Angular模板的错误外观来猜测.要解决此问题，我必须从boot-client.ts文件中删除以下行.

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

这篇关于@ngboostrap Bootstrap的JavaScript需要jQuery.在Bootstrap的JavaScript之前必须包含jQuery.使用webpack时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！