routes working

Author: daros10

src/app/app-routing.module.ts

@@ -1,11 +1,24 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { GettingStartedComponent } from './components/optionsSidebar/getting-started/getting-started.component';
+import { ReportsComponent } from './components/optionsSidebar/reports/reports.component';
+import { TimeClockComponent } from './components/optionsSidebar/time-clock/time-clock.component';
+import { TimeEntriesComponent } from './components/optionsSidebar/time-entries/time-entries.component';
+import { TimeOffComponent } from './components/optionsSidebar/time-off/time-off.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: 'gettingStarted', component: GettingStartedComponent},
+  {path: 'reports', component: ReportsComponent},
+  {path: 'timeClock', component: TimeClockComponent},
+  {path: 'timeEntries', component: TimeEntriesComponent},
+  {path: 'timeOff', component: TimeOffComponent},
+  {path: '', pathMatch: 'full', redirectTo: 'gettingStarted'},
+  {path: '**', pathMatch: 'full', redirectTo: 'gettingStarted'},
+];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -1,3 +1,5 @@
 <app-navbar></app-navbar>
 
-<app-sidebar></app-sidebar>
+<app-sidebar>
+    <router-outlet></router-outlet>
+</app-sidebar>

src/app/app.module.ts

@@ -7,12 +7,6 @@ import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { UserComponent } from './components/shared/user/user.component';
 import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
 import { ClockComponent } from './components/shared/clock/clock.component';
-import { OptionsSidebarComponent } from './components/options-sidebar/options-sidebar.component';
-import { GettingStartedComponent } from './components/optionsSidebar/getting-started/getting-started.component';
-import { TimeClockComponent } from './components/optionsSidebar/time-clock/time-clock.component';
-import { TimeEntriesComponent } from './components/optionsSidebar/time-entries/time-entries.component';
-import { TimeOffComponent } from './components/optionsSidebar/time-off/time-off.component';
-import { ReportsComponent } from './components/optionsSidebar/reports/reports.component';
 
 @NgModule({
   declarations: [
@@ -21,12 +15,6 @@ import { ReportsComponent } from './components/optionsSidebar/reports/reports.co
     UserComponent,
     SidebarComponent,
     ClockComponent,
-    OptionsSidebarComponent,
-    GettingStartedComponent,
-    TimeClockComponent,
-    TimeEntriesComponent,
-    TimeOffComponent,
-    ReportsComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/shared/sidebar/sidebar.component.html

@@ -3,24 +3,18 @@
     <!-- Sidebar -->
     <div class="bg-light border-right" id="sidebar-wrapper">
         <div class="list-group list-group-flush">
-            <a href="#" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i>   Getting Started</a>
-            <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
-            <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
-            <a href="#" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i>  Time Off</a>
-            <a href="#" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
+            <a [routerLink]="['/gettingStarted']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i>   Getting Started</a>
+            <a [routerLink]="['/timeClock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
+            <a [routerLink]="['/timeEntries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
+            <a [routerLink]="['/timeOff']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i>  Time Off</a>
+            <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
 
         </div>
     </div>
     <!-- /#sidebar-wrapper -->
 
     <!-- Page Content -->
-    <div id="page-content-wrapper">
-        <div class="container-fluid">
-            <h1 class="mt-4">Simple Sidebar</h1>
-            <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
-            <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
-        </div>
-    </div>
+    <router-outlet></router-outlet>
     <!-- /#page-content-wrapper -->
 
 </div>