GoshaFighten
commented
7 years ago Bootstrap requires jQuery to be in the global scope. But, we are loading jQuery as a module. They are not compatible by default. I've attached a sample project created using Angular-CLI. The project loads a simple module as the following:
var $ = require("jquery");
alert($.fn.jquery);As you can see, you are getting the error that 'jquery' is undefined. If you clear the scripts of the angular-cli.json file, you see that this module does work. To handle this scenario, it's necessary to customize the Webpack configuration file to use the ProvidePlugin as illustrated in the https://github.com/GoshaFighten/Angular2DXWebpackDotNetCore/blob/master/webpack.config.vendor.js#L45 line. But, Angular-CLI does not provide an API to specify this. See the https://github.com/angular/angular-cli/issues/1656 issue on the Angular-CLI repository. I suggest you use an Angular project with Webpack without Angular-CLI.
GH307.zip
martinmasse
LuisANino
Hi,
I have followed the instructions to add devextreme to a Angular-CLI generated application. It work fine.
Problems start when I add Bootstrap 4 using the instructions found on that page https://github.com/angular/angular-cli
Then I get the following error.
Uncaught TypeError: Cannot read property 'jquery' of undefined at Object. (deferred.js:25)
at webpack_require (bootstrap c038965…:52)
at Object. (common.js:12)
at webpack_require (bootstrap c038965…:52)
at Object. (string.js:11)
at webpack_require (bootstrap c038965…:52)
at Object. (error.js:12)
at webpack_require (bootstrap c038965…:52)
at Object. (errors.js:10)
at webpack_require (bootstrap c038965…:52)
at Object. (fx.js:11)
at webpack_require (bootstrap c038965…:52)
at Object. (accordion.js:11)
at __webpack_require__ (bootstrap c038965…:52)
at Object. (accordion.js:20)
Bootstrap 4 works fine if devextreme is not added to the app.
Any idea how to solve this issue?
Thanks