How to use tabs in angular2 <p>I have an application that uses angular2 with routes.ts properly set. In the app, I have navbar set according to the routes defined in routes.ts.</p> <p>In one of the route, I want to use a tab that does not refer to routes.ts but instead I want it to refer to the tab-content class.</p> <p>When I tried to run my application, I got an error that said the route is not defined in the routes.ts.</p> <p>How do I make tabs that refer to tab-content class instead of routes.ts?</p> <p>app.component.ts code:</p> <pre><code>import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; import { FooterComponent, HEADER_DIRECTIVES, NAVBAR_DIRECTIVES } from 'ui-core/core'; import { HomeComponent } from './components/home/home.component'; import { PrintJobComponent } from './components/printJob/printJob.component'; @Component({ selector: 'app-template', template: ` &lt;cui-header title="Sample App"&gt; &lt;cui-navbar&gt; &lt;cui-navbar-item route="/printJob"&gt;Print Job&lt;/cui-navbar-item&gt; &lt;cui-navbar-item route="/home"&gt;Home&lt;/cui-navbar-item&gt; &lt;/cui-navbar&gt; &lt;/cui-header&gt; &lt;router-outlet&gt;&lt;/router-outlet&gt; &lt;cui-footer [helpRoutePath]="helpRoutePath"&gt;&lt;/cui-footer&gt; `, directives: [FooterComponent, HEADER_DIRECTIVES, ROUTER_DIRECTIVES, NAVBAR_DIRECTIVES] }) export class AppComponent { } </code></pre> <p>routes.ts:</p> <pre><code>/** * angular2 imports */ import { RouterConfig, provideRouter } from '@angular/router'; /** * App Component imports */ import { HomeComponent } from './app/components/home/home.component'; import { PrintJobComponent } from './app/components/printJob/printJob.component'; export const APP_ROUTES: RouterConfig = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'printJob', component: PrintJobComponent }, { path: 'home', component: HomeComponent }, ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(APP_ROUTES) ]; </code></pre> <p>printJob.component.ts code:</p> <pre><code> import { Component } from '@angular/core'; @Component({ selector: 'print-job', template: ` &lt;div class="container-fluid single-col-full-width-container"&gt; &lt;br&gt; &lt;ul class="nav nav-tabs"&gt; &lt;li&gt;&lt;a data-toggle="tab" href="#printJobTab"&gt;Print Job&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a data-toggle="tab" href="#reprintJobTab"&gt;Reprint Job&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="tab-content"&gt; &lt;div id="printJobTab" class="tab-pane fade"&gt; &lt;p&gt;table for print job here.&lt;/p&gt; &lt;/div&gt; &lt;div id="reprintJobTab" class="tab-pane fade"&gt; &lt;p&gt;table for reprint job here.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ` }) export class PrintJobComponent { } </code></pre>