Question

希望有人可以指出我正确的方向。我研究过SO和Github问题，但找不到解决方案。

我已经开始在同一Angular 7项目中同时使用"@ng-bootstrap/ng-bootstrap: "^4.0.1"和"bootstrap": "^4.2.1"，并且下拉列表停止工作。下拉菜单是香草引导程序。

我怀疑是popper.js造成此问题的原因，但找不到如何正确配置我的项目。

这是我的配置

vendor.ts ：

...
import "bootstrap";
import "@ng-bootstrap/ng-bootstrap";
...
import "bootstrap/dist/css/bootstrap.min.css"

webpack.config.js ：

module.exports = {
...
entry: {
    'polyfills': './src/app/polyfills.ts',
    'vendor': './src/app/vendor.ts',
    'app': './src/app/bootstrap.ts'
  },

  resolve: {
    extensions: ['*', '.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(json|png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|cur)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { minimize: true } }
          ]
        })
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loaders: ['css-to-string-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      },
      {
        test: /\.sass$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      }
    ]
  },

  plugins: [
   ...
  ]
};

Bootstrap website说popper.js和jquery不需要添加到入口点，但是我应该在哪里添加它们？我想自己为他们服务，避免使用CDN。

谢谢！

Answer 1

我不确定Angular 7中是否有重大变化（甚至不知道您可以在7中弹出），但是对于Angular 5，在plugins部分的某个地方，您应该有一个{{ 1}}：

ScriptsWebpackPlugin

如果不存在，可以很容易地从new ScriptsWebpackPlugin({ "name": "scripts", "sourceMap": true, "filename": "scripts.bundle.js", "scripts": [ "./node_modules/jquery/dist/jquery.js", "./node_modules/popper.js/dist/umd/popper.js", "./node_modules/bootstrap/dist/js/bootstrap.js" ] }),导入并将它自己放入插件数组中。

Answer 2

我最终使用Webpack插件将脚本注入到index.html中：

var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

plugins : [
...
new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'jquery',
      entry: 'dist/jquery.min.js',
      global: 'jQuery',
    },
    {
      module: 'popper.js',
      entry: 'dist/umd/popper.min.js',
      global: 'popper',
    },
    {
      module: 'bootstrap',
      entry: 'dist/js/bootstrap.min.js',
      global: 'bootstrap',
    }
  ],
}),
... 
]

在Angular 7中一起使用ng-bootstrap和bootstrap

2 个答案: