@ngboostrap Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须包含在 Bootstrap 的 JavaScript 之前。使用 webpack 时

Question

我正在尝试让 bootstrap 4 使用 webpack 和 angular 2。据我所知，最好的方法是使用 ng-bootstrap .

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

然而，当我运行应用程序在浏览器中运行时出现 ZoneSymbolError。

我已经确保我的 webpack.config.vendor.js 已经重建等。四处移动会导致稍微不同的错误，但其中 none 可以正常工作。

是否有关于如何让 ng-bootstrap 使用 webpack 的示例（我找不到）或建议？

编辑：这是 webpack 供应商区域。

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

这是错误：

如果我把 jquery 放回去，它说 jquery 之前必须加载，但它仍然出错。

Answer 1

要使用来自 ng-bootstrap 的小部件，您 不需要 jQuery 并且 不需要 [=26] =] 的 JavaScript。唯一需要的依赖是 Bootstrap 的 CSS.

您遇到了错误，因为很可能您包含了 Bootstrap 的 JavaScript。再一次，这不是必需的 - 唯一的依赖是 CSS.

您可能想看看使用 WebPack 的 ng-bootstrap 演示站点 - 如果您检查 its vendor file，您会注意到只有 Bootstrap 的 CSS被引用：

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

Answer 2

根据您的错误外观，我猜您正在使用 ASP.NET Core/Angular 模板。要修复它，我必须从 boot-client.ts 文件中删除以下行。

import 'bootstrap';

Answer 3

您可以通过以下步骤添加 jQuery：

使用 npm
安装 jQuery
npm install jquery -- save
转到项目文件夹根目录下的 angular.json 或 angular-cli.json 文件，并在 scripts 标签
中添加以下代码
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.js" ]

确保您输入了正确的路径。

停止 Angular CLI 应用程序并重新运行使用 ng-serve 命令。
现在，当您对任何组件使用 jQuery 时，然后按以下代码导入它：

import * as $ from 'jquery';

@ngboostrap Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须包含在 Bootstrap 的 JavaScript 之前。使用 webpack 时

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

ng-bootstrap