0

I've been trying to add Bootstrap <link> and <script> tags to my HTML in an Angular project. I get all the CDN from here but I get the following error

Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.min.js:6

What am I doing wrong? Here is my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

Update: I included the electron tag to this question since this is an Angular project running with Electron framework, thinking now it could be part of the problem.

chris
  • 2,490
  • 4
  • 32
  • 56
  • No errors here. Are you running an add blocker or similar that might be blocking some of this? – Zlatko Apr 26 '18 at 13:04
  • @Zlatko not sure to be honest. But I don't think so. It is Angular project running with the Electron framework. – chris Apr 26 '18 at 13:34
  • I just updated the question including the `electron` tag. At first, I didn't think that could be part of the problem. But maybe it is? – chris Apr 26 '18 at 13:53
  • Could be. In that case, the best thing would be to try non-slim jQuery like someone suggested. – Zlatko Apr 26 '18 at 14:25

3 Answers3

1

I notice 

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"

which to me isn't supposed to be there. this is maybe what's causing the issue.

ALSO

Why don't you add bootstrap locally instead? it has a lot of advantages and is how the majority of us do it.

  1. in your Powershell or CMD or your IDE (coding program)'s console type either :

    (for Bootstrap 4 (in beta)):

    npm install bootstrap@next --save

    OR

    (for Bootstrap 3)

    npm install bootstrap --save

  2. Configure .angular-cli.json:

    "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.scss" ]

  3. configure src/style.css or src/style.scss:

    @import '~bootstrap/dist/css/bootstrap.min.css';

or you could use ngx-bootsrap wich is an angular wrapper for bootstrap.

there's ups and downs to that. ngx-bootstrap is missing many components overall and doesn't have the latest and greatest in bootstrap but at least it's tailored for use in angular.

sources :

tatsu
  • 2,316
  • 7
  • 43
  • 87
0

It might have to do with this: link

Try to include only the minified version (not the slim.min): 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
vhbazan
  • 1,240
  • 1
  • 17
  • 26
  • Still I'm getting the error :( Now it not only says`at bootstrap.min.js:6` but also includes `at util.js:56` in the error – chris Apr 26 '18 at 13:18
0

Bootstrap relies on jQuery. In your index HTML, before you include any of the Javascript imports, you'll want to do something like this:

<script>
  var $ = jQuery = require("jquery")
</script>
Neil P.
  • 1,026
  • 2
  • 15
  • 32