-2

I am trying to use the carousel component of bootstrap in an Angular 2 application that I am developing using webpack. I am having real problems requiring bootsrap.js and jQuery.js.

There are many, many posts on this subject on stackoverflow and elsewhere on the world wide interweb. This post, for example, looked really promising but I followed it to the letter and still get the error in the browser:

Uncaught Error: Bootstrap's JavaScript requires jQuery

In my component's definition file, I have the two rather smelly and suspect looking requires:

require("../../../../node_modules/jquery/dist/jquery.js");
require('../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js');

I have tried the non-minified version of the bootstrap,.js, along with several variations on the require, such as require('jquery') but the error persists.

Please help! I have had this working on another project and can't understand why jQuery isn't playing along.

One thing I would like to do is to simply require the jQuery library directly in the component, like this:

window.jquery = window.$ = require('jquery');

The TypeScript compiler complained, predictably. Creating an window interface that includes the $ and jquery members had no effect. The compiler complained nonetheless.

I would be happy with this solution at the moment, until I can find a less smelly solution.

Thoughts or solutions great appreciated and rewarded with virtual doughnuts.

Hmm. Following basarat's advice, I tried the following:

import $ = require('jquery');
import bootstrap = require('bootstrap-sass');

This yielded errors in VSC and webpack: cannot find module jquery, and cannot find module bootstrap-sass. Oddly, removing the assignments, like this:

require('jquery');
require('bootstrap-sass');

...and the modules were magically found. With a different error regarding sizzle, but at least it found the modules.

Thoughts?

Community
  • 1
  • 1
serlingpa
  • 12,024
  • 24
  • 80
  • 130
  • `and the modules were magically found. ` Modules found at `compile` time and at `runtime` are different things. To be found at `compile` time you need TypeScript definitions (e.g. `typings install --ambient jquery`). You will need to write `bootstrap-sass` definitions yourself – basarat Mar 09 '16 at 02:47
  • That didn't solve the issue and it is occurring at compile time. Even before compile: VS Code highlights it. But it's odd that it should happen only if you prepend `import $ =`. – serlingpa Mar 09 '16 at 10:22

1 Answers1

0

I have the two rather smelly and suspect looking requires

It should be: 

import $ = require('jquery');  // 1 
import bootstrap = require('bootstrap');  // 2

Anything else is wrong. I can assure you that 1 just works. The issue is with bootstrap and its npm package. If you have these imports in this order that should just work as well. Compile with --module commonjs.

basarat
  • 261,912
  • 58
  • 460
  • 511