title: How do I get Bootstrap Components work with Angular 6?
body: <p>I am trying to get Bootstrap components like Tooltips and Popovers to work with Angular 6, but they dont want to show up.</p>
  
  <p>For Tooltips all what I get is this:
  <a href="https://i.stack.imgur.com/5NAQ9.png" rel="nofollow noreferrer">Tooltip example</a></p>
  
  <p>Setup:</p>
  
  <pre><code>// app.component.html
  &lt;div style="text-align:center; padding:100px"&gt;
  &lt;button
      type="button"
      class="btn btn-secondary"
      data-toggle="tooltip"
      data-placement="top"
      title="Tooltip on top"&gt;
      Tooltip on top
  &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>// styles.css
  @import '~bootstrap/dist/css/bootstrap.min.css';
  </code></pre>
  
  <hr>
  
  <pre><code>// angular.json
  "styles": [
            "src/styles.css"
          ],
          "scripts": [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/popper.js/dist/popper.js",
            "./node_modules/bootstrap/dist/js/bootstrap.min.js"
          ]
  </code></pre>
  
  <hr>
  
  <pre><code>// package.json
  {
    "name": "bootstrap-test",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.0.3",
      "@angular/forms": "^6.0.3",
      "@angular/http": "^6.0.3",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.0.3",
      "@angular/router": "^6.0.3",
      "bootstrap": "^4.1.3",
      "core-js": "^2.5.4",
      "jquery": "^3.3.1",
      "popper.js": "^1.14.3",
      "rxjs": "^6.0.0",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^6.0.3",
      "@angular-devkit/build-angular": "~0.6.8",
      "typescript": "~2.7.2",
      "@angular/cli": "~6.0.8",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }
  </code></pre>
  
  <p>I also wrote a directive in Angular to initialize the tooltip, but the console is giving me an error:</p>
  
  <pre><code>// load-tooltip.directive.ts
  import { Directive, ElementRef } from '@angular/core';
  
  declare var $ :any;
  
  @Directive({
    selector: '[appLoadTooltip]'
  })
  export class LoadTooltipDirective {
  
    constructor(private el: ElementRef) {
      $(el.nativeElement).tooltip();
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>// console.log
  ReferenceError: $ is not defined
      at new LoadTooltipDirective (load-tooltip.directive.ts:11)
      at createClass (core.js:9302)
      at createDirectiveInstance (core.js:9187)
      at createViewNodes (core.js:10407)
      at callViewAction (core.js:10723)
      at execComponentViewsAction (core.js:10642)
      at createViewNodes (core.js:10435)
      at createRootView (core.js:10321)
      at callWithDebugContext (core.js:11352)
      at Object.debugCreateRootView [as createRootView] (core.js:10839)
  </code></pre>
  
  <p>Here is an working example with Angular 5:
  <a href="https://stackblitz.com/edit/angular-bhzy2y?file=app%2Fapp.component.css" rel="nofollow noreferrer">Stackblitz Example</a></p>
  
  <p>So why does it not work in Angular 6? Can anyone point me in the right direction?</p>
  
  <p>(I dont want to use ng-bootstrap or similiar.)</p>