Question

我正在使用带有.NET Core 2.0的Visual Studio 2017 Angular模板。该模板有许多旧的依赖项，我已经更新，包括Angular 5.0.0。使用Bootstrap 3.x.x运行vanilla模板。但是，使用 Bootstrap 4.0.0-beta.2 会导致以下错误：

未捕获的ReferenceError：未定义Popper

我已尽力遵循此处的说明：

http://getbootstrap.com/docs/4.0/getting-started/webpack/

我看过这个问题：

Bootstrap 4: Uncaught ReferenceError: Popper is not defined

根据那里列出的解决方案，我必须在bootstrap之前注册popper或者使用minrap版本的boostrap，因为它已经提供了popper。但是，我正在使用webpack 2.5.1（我刚刚学习），而且我不知道如何在提供的 webpack.config.js 文件中实现这些解决方案中的任何一个作为模板的一部分，包括由boostrap-webpack文档调出的修改。

webpack.config.js

import 'reflect-metadata';
import 'zone.js';
import 'bootstrap';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.browser';

if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app');
        const newRootElem = document.createElement('app');
        oldRootElem!.parentNode!.insertBefore(newRootElem, oldRootElem);
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

// Note: @ng-tools/webpack looks for the following expression when performing production
// builds. Don't change how this line looks, otherwise you may break tree-shaking.
const modulePromise = platformBrowserDynamic().bootstrapModule(AppModule);

此外，这里是作为模板一部分提供的主入口点文件 boot.browser.ts ：

<Grid>
        <ListView Name="theListview" HorizontalAlignment="Left" Height="236" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">

            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Name="btnAdd" Click="btnAdd_Click" Content="Add" HorizontalAlignment="Left" Margin="61,276,0,0" VerticalAlignment="Top" Width="75"/>
        <Button Name="btnRemove" Click="btnRemove_Click" Content="Remove" HorizontalAlignment="Left" Margin="389,276,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>

Answer 1

尝试在bootstrap之前包含Popper.js而不是

之后

 "../node_modules/popper.js/dist/umd/popper.min.js",
 "../node_modules/bootstrap/dist/js/bootstrap.min.js"

Answer 2

我安装了一个特定版本的popper.js，我知道它正在使用bootstrap 4.0.0-beta，如下所示：

npm install popper.js@1.12.5 --save-dev

然后我只需将它添加到我的webpack.config.vendor.js中就像这样：

new webpack.ProvidePlugin(
            { 
                $: 'jquery', 
                jQuery: 'jquery', // }, Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
                jquery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: 'popper.js/dist/umd/popper.js'                     
            }                
        ),

我不再收到 Uncaught ReferenceError：Popper未定义错误。

我没有更改代码，只有webpack和npm更改。

Answer 3

我终于找到了如何克服错误。我在主入口点 boot.browser.ts 文件中使用了以下行：

import * as $ from 'jquery';

//These two lines didn't remove the error
//import Popper from 'popper.js';
//import 'bootstrap';

//This one did remove the error. The bundle version of bootstrap includes popper in the correct order (according to the docs)
import 'bootstrap/dist/js/bootstrap.bundle.js';

有趣的是，bootstrap github（https://github.com/twbs/bootstrap/issues/24648）中建议的代码是使用此行进行jquery导入：

import $ from 'jquery'

而不是

import * as $ from 'jquery'

但前者造成了这个错误：

找不到模块＆＃39; jquery＆＃39;
的声明文件

但是，我不知道两行之间有什么区别

未捕获的ReferenceError：未定义Popper - 使用Bootstrap 4和Webpack 3.8.1

3 个答案: