Используйте ng-bootstrap и bootstrap вместе в Angular 7 - PullRequest
Новая
       3

Используйте ng-bootstrap и bootstrap вместе в Angular 7

0 голосов
/ 23 января 2019

Надеюсь, кто-нибудь может указать мне правильное направление.Я рассмотрел проблемы SO и Github, но не могу найти решение.

Я начал использовать "@ng-bootstrap/ng-bootstrap: "^4.0.1" и "bootstrap": "^4.2.1" в одном проекте Angular 7, и раскрывающиеся списки перестали работать.Раскрывающиеся страницы - ванильный начальный загрузчик.

Я подозреваю, что причиной этой проблемы является 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: [
   ...
  ]
};

Сайт начальной загрузки говоритчто popper.js и jquery не нужно добавлять к точке входа, но где я должен их добавить?Я хотел бы обслуживать их сам и избегать CDN.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 24 января 2019

В итоге я вставил скрипты в свой index.html с помощью плагина Webpack: 

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',
    }
  ],
}),
... 
]
0 голосов
/ 23 января 2019

Я не уверен, что что-то существенное изменилось в Angular 7 (я даже не знал, что вы можете извлечь в 7), но для Angular 5, где-то в вашем разделе plugins, у вас должно быть 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"
      ]
    }),

Если его там нет, достаточно просто импортировать его из @angular/cli/plugins/webpack и поместить его в массив плагинов самостоятельно.

...