title: What is the right way to use ngbTooltip in ASP.NET Core 2 Angular 5 Template?
body: <p>What is the right/best way to use <code>ngbTooltip</code> in ASP.NET Core 2 Angular 5  Template.</p>
  
  <p>I've running ASP.NET Core 2 Angular 5 Template on following versions:</p>
  
  <ul>
  <li>npm 5.8.0 </li>
  <li>node 6.9.4</li>
  <li>Angular CLI 1.7.4</li>
  </ul>
  
  <p><strong>Scenario</strong></p>
  
  <p>I've created my project on ASP.Net Core 2 using Angular 5 template for implement <code>ngbTooltip</code> in my components. I follow these instructions, as describe <a href="https://ng-bootstrap.github.io/#/getting-started" rel="nofollow noreferrer">here</a>.</p>
  
  <p>My project is running fine but <code>ngbTooltip</code> is not showing on my HTML anchor elements. Also there is no such error is prompting in my browser console window. I don't understand what I'm doing wrong in my code.</p>
  
  <p><strong>app.module.browser.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { AppModuleShared } from './app.module.shared';
  import { AppComponent } from './components/app/app.component';
  
  @NgModule({
      bootstrap: [ AppComponent ],
      imports: [
          BrowserModule,
          NgbModule.forRoot(),
          AppModuleShared
      ],
      providers: [
          { provide: 'BASE_URL', useFactory: getBaseUrl }
      ]
  })
  export class AppModule {}
  
  export function getBaseUrl() {
      return document.getElementsByTagName('base')[0].href;
  }
  </code></pre>
  
  <p><strong>app.module.shared.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent } from './components/app/app.component';
  import { NavMenuComponent } from './components/navmenu/navmenu.component';
  import { HomeComponent } from './components/home/home.component';
  import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
  import { CounterComponent } from './components/counter/counter.component';
  
  @NgModule({
      declarations: [
          AppComponent,
          NavMenuComponent,
          CounterComponent,
          FetchDataComponent,
          HomeComponent
      ],
      imports: [
          CommonModule,
          HttpModule,
          FormsModule,
          BrowserAnimationsModule,
          NgbModule,
          RouterModule.forRoot([
              { path: '', redirectTo: 'home', pathMatch: 'full' },
              { path: 'home', component: HomeComponent },
              { path: 'counter', component: CounterComponent },
              { path: 'fetch-data', component: FetchDataComponent },
              { path: '**', redirectTo: 'home' }
          ])
      ]
  })
  export class AppModuleShared {}
  </code></pre>
  
  <p><strong>navmenu.component.html</strong></p>
  
  <pre><code>&lt;ul class='nav navbar-nav'&gt;
      &lt;li [routerLinkActive]="['link-active']"&gt;
          &lt;a [routerLink]="['/home']" placement="right" ngbTooltip="Home"&gt;
              &lt;span class='glyphicon glyphicon-home'&gt;&lt;/span&gt; Home
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li [routerLinkActive]="['link-active']"&gt;
          &lt;a [routerLink]="['/counter']" placement="right" ngbTooltip="Counter"&gt;
              &lt;span class='glyphicon glyphicon-education'&gt;&lt;/span&gt; Counter
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li [routerLinkActive]="['link-active']"&gt;
          &lt;a [routerLink]="['/fetch-data']" placement="right" ngbTooltip="Counter"&gt;
              &lt;span class='glyphicon glyphicon-th-list'&gt;&lt;/span&gt; Fetch data
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>webpack.config.vendor.js</strong></p>
  
  <p>Also I've also add <code>@ng-bootstrap/ng-bootstrap</code> entry in <code>treeShakableModules</code></p>
  
  <pre><code>const treeShakableModules = [
      '@angular/animations',
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@ng-bootstrap/ng-bootstrap',
      'zone.js'
  ];
  const nonTreeShakableModules = [
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-promise',
      'es6-shim',
      'event-source-polyfill',
      'jquery',
  ];
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "site2",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "postinstall": "webpack --config webpack.config.vendor.js"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.0.0",
      "@angular/cli": "1.5.0",
      "@angular/common": "^5.0.0",
      "@angular/compiler": "^5.0.0",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/core": "^5.0.0",
      "@angular/forms": "^5.0.0",
      "@angular/http": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@angular/platform-browser": "^5.0.0",
      "@angular/platform-browser-dynamic": "^5.0.0",
      "@angular/platform-server": "^5.0.0",
      "@angular/router": "^5.0.0",
      "@ng-bootstrap/ng-bootstrap": "^1.1.2",
      "@ngtools/webpack": "1.8.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "@types/webpack-env": "1.13.0",
      "angular2-template-loader": "0.6.2",
      "aspnet-prerendering": "^3.0.1",
      "aspnet-webpack": "^2.0.1",
      "awesome-typescript-loader": "3.2.1",
      "bootstrap": "3.3.7",
      "codelyzer": "~3.2.0",
      "css": "2.2.1",
      "css-loader": "0.28.4",
      "es6-shim": "0.35.3",
      "event-source-polyfill": "0.0.9",
      "expose-loader": "0.7.3",
      "extract-text-webpack-plugin": "2.1.2",
      "file-loader": "0.11.2",
      "html-loader": "0.4.5",
      "isomorphic-fetch": "2.2.1",
      "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
      "jquery": "3.2.1",
      "json-loader": "0.5.4",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "preboot": "4.5.2",
      "protractor": "~5.1.2",
      "raw-loader": "0.5.1",
      "reflect-metadata": "0.1.10",
      "rxjs": "5.4.2",
      "style-loader": "0.18.2",
      "to-string-loader": "1.1.5",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2",
      "url-loader": "0.5.9",
      "webpack": "2.5.1",
      "webpack-hot-middleware": "2.18.2",
      "webpack-merge": "4.1.0",
      "zone.js": "0.8.12"
    },
    "devDependencies": {
      "@angular/cli": "1.5.0",
      "@angular/compiler-cli": "^5.0.0",
      "@angular/language-service": "^5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.2.0",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2",
      "@types/chai": "4.0.1",
      "chai": "4.0.2",
      "karma-chai": "0.1.0",
      "karma-webpack": "2.0.3"
    }
  }
  </code></pre>
  
  <p><strong>Output</strong></p>
  
  <p>when I hover on any anchor tag there is no such tooltip shown. Kindly help me on this what I'm doing wrong in my code. Thanks.</p>
  
  <p><a href="https://i.stack.imgur.com/RRulI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RRulI.png" alt="enter image description here"></a></p>