Wie benutzt man ng2-Bootstrap mit Webpack?

Question

Ich habe ein Projekt von jHipster generiert, aber es verwendet ng-bootstrap. Ich muss Bootstrap 3 verwenden, weil mein Team bereits eine Schnittstelle dafür entworfen hat. Also versuche ich, ng2-bootstrap einzurichten. Im Folgenden sind meine webpack.common.js und webpack.vendor.js Dateien.

webpack.vendor.js

var webpack = require('webpack'); 
module.exports = { 
    entry: { 
     'vendor': [ 
      './src/main/webapp/app/vendor', 
      '@angular/common', 
      '@angular/compiler', 
      '@angular/core', 
      '@angular/forms', 
      '@angular/http', 
      '@angular/platform-browser', 
      '@angular/platform-browser-dynamic', 
      '@angular/router', 
      '@ng-bootstrap/ng-bootstrap', 
      'angular2-cookie', 
      'angular2-infinite-scroll', 
      'jquery', 
      'ng2-bootstrap', 
      'ng-jhipster', 
      'ng2-webstorage', 
      'rxjs' 
     ] 
    }, 
    resolve: { 
     extensions: ['.ts', '.js'], 
     modules: ['node_modules'] 
    }, 
    module: { 
     exprContextCritical: false, 
     rules: [ 
      { 
       test: /(vendor\.css|global\.css)/, 
       loaders: ['style-loader', 'css-loader'] 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i, 
       loaders: [ 
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', { 
         loader: 'image-webpack-loader', 
         query: { 
          gifsicle: { 
           interlaced: false 
          }, 
          optipng: { 
           optimizationLevel: 7 
          } 
         } 
        } 
       ] 
      } 
     ] 
    }, 
    output: { 
     filename: '[name].dll.js', 
     path: './build/www', 
     library: '[name]' 
    }, 
    plugins: [ 
     new webpack.DllPlugin({ 
      name: '[name]', 
      path: './build/www/[name].json' 
     }) 
    ] 
}; 

webpack.common.js

const webpack = require('webpack'); 
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const StringReplacePlugin = require('string-replace-webpack-plugin'); 
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); 
const path = require('path'); 

module.exports = function (options) { 
    const DATAS = { 
     VERSION: JSON.stringify(require("../package.json").version), 
     DEBUG_INFO_ENABLED: options.env === 'dev' 
    }; 
    return { 
     entry: { 
      'polyfills': './src/main/webapp/app/polyfills', 
      'global': './src/main/webapp/content/css/global.css', 
      'main': './src/main/webapp/app/app.main' 
     }, 
     resolve: { 
      extensions: ['.ts', '.js'], 
      modules: ['node_modules'] 
     }, 
     module: { 
      rules: [ 
       { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' }, 
       { 
        test: /\.ts$/, 
        loaders: [ 
         'angular2-template-loader', 
         'awesome-typescript-loader' 
        ], 
        exclude: ['node_modules/generator-jhipster'] 
       }, 
       { 
        test: /\.html$/, 
        loader: 'html-loader', 
        options: { 
         minimize: true, 
         caseSensitive: true, 
         removeAttributeQuotes:false, 
         minifyJS:false, 
         minifyCSS:false 
        }, 
        exclude: ['./src/main/webapp/index.html'] 
       }, 
       { 
        test: /\.css$/, 
        loaders: ['to-string-loader', 'css-loader'], 
        exclude: /(vendor\.css|global\.css)/ 
       }, 
       { 
        test: /(vendor\.css|global\.css)/, 
        loaders: ['style-loader', 'css-loader'] 
       }, 
       { 
        test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i, 
        loaders: [ 
         'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', { 
          loader: 'image-webpack-loader', 
          query: { 
           gifsicle: { 
            interlaced: false 
           }, 
           optipng: { 
            optimizationLevel: 7 
           } 
          } 
         } 
        ] 
       }, 
       { 
        test: /app.constants.ts$/, 
        loader: StringReplacePlugin.replace({ 
         replacements: [{ 
          pattern: /\/\* @toreplace (\w*?) \*\//ig, 
          replacement: function (match, p1, offset, string) { 
           return `_${p1} = ${DATAS[p1]};`; 
          } 
         }] 
        }) 
       } 
      ] 
     }, 
     plugins: [ 
      new CommonsChunkPlugin({ 
       names: ['manifest', 'polyfills'].reverse() 
      }), 
      new webpack.DllReferencePlugin({ 
       context: './', 
       manifest: require(path.resolve('./build/www/vendor.json')), 
      }), 
      new CopyWebpackPlugin([ 
       { from: './node_modules/swagger-ui/dist', to: 'swagger-ui/dist' }, 
       { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' }, 
       { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' }, 
       { from: './src/main/webapp/robots.txt', to: 'robots.txt' }, 
       { from: './src/main/webapp/i18n', to: 'i18n' } 
      ]), 
      new webpack.ProvidePlugin({ 
       $: "jquery", 
       jQuery: "jquery" 
      }), 
      new HtmlWebpackPlugin({ 
       template: './src/main/webapp/index.html', 
       chunksSortMode: 'dependency', 
       inject: 'body' 
      }), 
      new AddAssetHtmlPlugin([ 
       { filepath: path.resolve('./build/www/vendor.dll.js'), includeSourcemap: false } 
      ]), 
      new StringReplacePlugin() 
     ] 
    }; 
}; 

Es folgt eine von app.module.ts snipped

import './vendor.ts'; 

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { Ng2Webstorage } from 'ng2-webstorage'; 
import { DropdownModule } from 'ng2-bootstrap'; 

import { 
    NavbarComponent, 
    FooterComponent, 
} from './layouts'; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     LayoutRoutingModule, 
     DropdownModule.forRoot(), 
     Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}), 
    ], 

Für das Leben von mir Ich kann mir nicht vorstellen, warum es nicht funktionieren würde, wenn ich versuche, ein Bootstrap-Dropdown in meiner navbar.html zu verwenden.

Answer 1

Ich vermisste Anweisung aus ng2-Bootstrap in den HTML-Dateien zu verwenden. Das hat das Problem behoben.