I spent on this lots of hours already with zero luck.
I need to use Bootstrap js which requires jQuery. It seems to me that both these libraries loaded (at least I can use $ in console), but jQuery and jquery reference in Chrome console do not work. My package.json
{
"name": "myproj",
"version": "0.0.0",
"description": "myproj",
"private": true,
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"@angular/common": "2.4.4",
"@angular/compiler": "2.4.4",
"@angular/core": "2.4.4",
"@angular/forms": "2.4.4",
"@angular/http": "2.4.4",
"@angular/platform-browser": "2.4.4",
"@angular/platform-browser-dynamic": "2.4.4",
"@angular/router": "3.4.4",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.15",
"angular2-cookie": "1.2.6",
"angular2-infinite-scroll": "0.2.9",
"jquery": "^3.1.1",
"bootstrap": "^3.3.7",
"bootstrap-sass-loader": "^1.0.10",
"codemirror": "5.23.0",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"hammerjs": "2.0.8",
"imports-loader": "^0.7.0",
"ng-jhipster": "0.1.6",
"ng2-webstorage": "1.5.0",
"reflect-metadata": "0.1.9",
"rxjs": "5.0.3",
"sockjs-client": "1.1.1",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"webstomp-client": "1.0.3",
"zone.js": "0.7.6"
},
"devDependencies": {
"@types/jasmine": "2.5.41",
"@types/node": "7.0.1",
"@types/selenium-webdriver": "2.53.33",
"add-asset-html-webpack-plugin": "1.0.2",
"angular-cli": "1.0.0-beta.26",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "3.0.0-beta.18",
"bootstrap-loader": "^2.0.0-beta.20",
"bootstrap-sass": "^3.3.7",
"browser-sync": "2.18.6",
"browser-sync-webpack-plugin": "1.1.3",
"codelyzer": "2.0.0-beta.4",
"copy-webpack-plugin": "4.0.1",
"css-loader": "^0.26.1",
"del": "2.2.2",
"event-stream": "3.3.4",
"exports-loader": "0.6.3",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"file-loader": "0.9.0",
"generator-jhipster": "4.0.1",
"html-webpack-plugin": "2.26.0",
"image-webpack-loader": "3.1.0",
"jasmine-core": "2.5.2",
"jasmine-reporters": "2.2.0",
"jquery": "^3.1.1",
"karma": "1.4.0",
"karma-chrome-launcher": "2.0.0",
"karma-coverage": "1.1.1",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-phantomjs-launcher": "1.0.2",
"karma-remap-istanbul": "0.4.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.1",
"lazypipe": "1.0.1",
"lodash": "4.17.4",
"map-stream": "0.0.6",
"node-sass": "^4.5.0",
"phantomjs-prebuilt": "2.1.14",
"protractor": "4.0.11",
"protractor-jasmine2-screenshot-reporter": "0.3.2",
"proxy-middleware": "0.15.0",
"raw-loader": "0.5.1",
"resolve-url-loader": "^1.6.1",
"run-sequence": "1.2.2",
"sass-loader": "^4.1.1",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.0.5",
"style-loader": "^0.13.1",
"to-string-loader": "1.1.5",
"ts-node": "1.7.1",
"tslint": "4.3.1",
"tslint-loader": "3.3.0",
"typescript": "2.1.5",
"url-loader": "^0.5.7",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0",
"webpack-merge": "2.4.0",
"webpack-visualizer-plugin": "0.1.10",
"write-file-webpack-plugin": "3.4.2",
"yargs": "6.6.0"
},
"engines": {
"node": ">=6.9.0"
},
"scripts": {
"lint": "tslint src/main/webapp/app/**/*.ts --force",
"lint:fix": "tslint src/main/webapp/app/**/*.ts --fix --force",
"tsc": "tsc",
"tsc:w": "tsc -w",
"start": "npm run webpack:dev",
"webpack:build": "webpack --config webpack/webpack.vendor.js && webpack --config webpack/webpack.dev.js",
"webpack:build:dev": "webpack --config webpack/webpack.dev.js",
"webpack:dev": "webpack-dev-server --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
"webpack:prod": "npm test && webpack -p --config webpack/webpack.vendor.js && webpack -p --config webpack/webpack.prod.js",
"test": "npm run lint && karma start src/test/javascript/karma.conf.js",
"test:watch": "karma start --watch",
"e2e": "protractor src/test/javascript/protractor.conf.js",
"postinstall": "webdriver-manager update && npm run webpack:build"
}
}
my 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: 'raw-loader',
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]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
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',
'window.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()
]
};
};
my vendor.ts
/* tslint:disable */
import '../content/css/vendor.css';
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
I generated this project with jHipster and Angular2 support.
I get this exception in Chrome
Error: Bootstrap's JavaScript requires jQuery at Object.<anonymous> (http://localhost:8080/vendor.dll.js:107411:9) [<root>] at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
