The selector "app-tool-tip" did not match any elements how do I fix this? - angular6

Question

I need to make a SIMPLE tool tip and I've implemented the following from here: https://ng-bootstrap.github.io/#/components/tooltip/examples
What I'm getting is this error: The selector "app-tool-tip" did not match any elements
Here's my tooltip component:
Tooltip Module:
import {NgModule} from '#angular/core';
import {FormsModule} from '#angular/forms';
import {BrowserModule} from '#angular/platform-browser';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import {NgbdTooltipComponent} from './tool-tip.component';
#NgModule({
imports: [BrowserModule, FormsModule, NgbModule],
declarations: [NgbdTooltipComponent],
exports: [NgbdTooltipComponent],
bootstrap: [NgbdTooltipComponent]
})
export class NgbdTooltipModule {}
Tooltip Component
import {Component, OnInit, Input} from '#angular/core';
#Component({
selector: 'app-tool-tip',
templateUrl: './tool-tip.component.html',
styleUrls: ['./tool-tip.component.scss']
})
export class NgbdTooltipComponent implements OnInit {
#Input() toolTip: string;
constructor() {}
ngOnInit() {
}
}
Tooltip HTML
<button type="button" class="btn btn-outline-secondary mr-2"
placement="top" ngbTooltip="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-outline-secondary mr-2"
placement="right" ngbTooltip="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-outline-secondary mr-2"
placement="bottom" ngbTooltip="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-outline-secondary mr-2"
placement="left" ngbTooltip="Tooltip on left">
Tooltip on left
</button>
This is my app-component.html
<div
*ngIf="loading"
class="loading d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md pt-3">
<div class="loading__brand"></div>
<h1 class="h3 my-3 text-center text-muted">Loading...</h1>
</div>
</div>
</div>
</div>
<app-error-message *ngIf="showError" ng-class="{fade:doFade}" [errorMessage]="errorMessage"></app-error-message>
<app-tool-tip></app-tool-tip>
And this is being imported in my app.module.ts
import {NgbdTooltipModule} from './components/tool-tip/tool-tip.module';
This is my main.ts
platformBrowserDynamic()
.bootstrapModule(NgbdTooltipModule)
.then(ref => {
// Ensure Angular destroys itself on hot reloads.
if (window[<any>'ngRef']) {
window['ngRef'].destroy();
}
window['ngRef'] = ref;
// Otherwise, log the boot error
})
.catch(err => console.error(err));
How do I fix this and why can't it find: app-tool-tip selector?

Answer 1

I don't see in your code provision for AppComponent & AppModule. You should bootstrap your AppModule (in main.ts), and import your NgbdTooltipModule into app.module.ts file. See below for an example. I hope it helps.
Stackblitz Project: https://stackblitz.com/edit/ngbd-tooltips
// main.ts Main Entry
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule) // Bootstrap AppModule
.then(ref => {
// Ensure Angular destroys itself on hot reloads.
if (window[<any>'ngRef']) {
window['ngRef'].destroy();
}
window['ngRef'] = ref;
// Otherwise, log the boot error
})
.catch(err => console.error(err));
// app.module.ts - App Module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { NgbdTooltipModule } from './ngbd-tooltip/ngbd-tooltip.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
NgbdTooltipModule // Import NgbdTooltipModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// ngbd-tooltip.module.ts - Tooltip Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { NgbdTooltipComponent } from './ngbd-tooltip.component';
#NgModule({
declarations: [NgbdTooltipComponent], // Declare NgbdTooltipComponent
imports: [
CommonModule
],
exports: [NgbdTooltipComponent] // Export NgbdTooltipComponent
})
export class NgbdTooltipModule { }