CODEWITHSUNDEEP
htmlcssangularbootstrap-4electron
chris
chris

Reputation: 2810

Uncaught TypeError with Bootstrap and Angular

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.

Upvotes: 0

Views: 1595

Answers (3)

Neil P.
Neil P.

Reputation: 1114

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>

Upvotes: 0

tatsu
tatsu

Reputation: 2536

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 :

Upvotes: 1

vhbazan
vhbazan

Reputation: 1427

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>

Upvotes: 0

Related Questions