switching between components

src/app/app-routing.module.ts

@@ -1,15 +1,17 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthComponent } from './auth/auth.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 
 
 const routes: Routes = [
   {path : '', component: DashboardComponent},
-  {path : 'dashboard', component: DashboardComponent}
+  {path : 'dashboard', component: DashboardComponent},
+  {path : 'login', component: AuthComponent}
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {useHash: true} )],
   exports: [RouterModule]
 })
 export class AppRoutingModule {

src/app/app.module.ts

@@ -10,11 +10,13 @@ import { IconsModule } from '@progress/kendo-angular-icons';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { AuthComponent } from './auth/auth.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DashboardComponent 
+    DashboardComponent,
+    AuthComponent 
   ],
   imports: [
     BrowserModule,

src/app/auth/auth.component.html

@@ -0,0 +1 @@
+<p>auth works!</p>

src/app/auth/auth.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AuthComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/auth.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.scss']
+})
+export class AuthComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dist/app-routing.module.js

@@ -9,17 +9,19 @@ exports.__esModule = true;
 exports.AppRoutingModule = void 0;
 var core_1 = require("@angular/core");
 var router_1 = require("@angular/router");
+var auth_component_1 = require("./auth/auth.component");
 var dashboard_component_1 = require("./dashboard/dashboard.component");
 var routes = [
     { path: '', component: dashboard_component_1.DashboardComponent },
-    { path: 'dashboard', component: dashboard_component_1.DashboardComponent }
+    { path: 'dashboard', component: dashboard_component_1.DashboardComponent },
+    { path: 'login', component: auth_component_1.AuthComponent }
 ];
 var AppRoutingModule = /** @class */ (function () {
     function AppRoutingModule() {
     }
     AppRoutingModule = __decorate([
         core_1.NgModule({
-            imports: [router_1.RouterModule.forRoot(routes)],
+            imports: [router_1.RouterModule.forRoot(routes, { useHash: true })],
             exports: [router_1.RouterModule]
         })
     ], AppRoutingModule);

src/app/dist/main-menu-items.js

@@ -10,9 +10,9 @@ exports.mainMenuItems = [
         text: 'SFM',
         icon: 'more-vertical',
         items: [
-            { text: 'Summary', icon: 'calculator', url: '/dashboard' },
+            { text: 'Summary', icon: 'calculator', url: '/#/dashboard' },
             { text: '--', separator: "true" },
-            { text: 'Logout', icon: 'logout', url: '/login' }
+            { text: 'Logout', icon: 'logout', url: '/#/login' }
         ]
     },
     {

src/app/main-menu-items.ts

@@ -7,9 +7,9 @@ export const mainMenuItems: any[] = [
         text: 'SFM',
         icon: 'more-vertical',
         items: [
-            { text: 'Summary', icon: 'calculator', url: '/dashboard'}, 
+            { text: 'Summary', icon: 'calculator', url: '/#/dashboard'}, 
             { text: '--', separator: "true"  }, 
-            { text: 'Logout', icon: 'logout', url: '/login'}]
+            { text: 'Logout', icon: 'logout', url: '/#/login'}]
     },
     {
         text: 'Loans',