src/app/app.component.html

@@ -1,2 +1,2 @@
-<app-employee-list></app-employee-list>
+<router-outlet></router-outlet>
 

src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'lf10StarterNew' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('lf10StarterNew');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, lf10StarterNew');
-  });
-});

src/app/app.component.ts

@@ -1,11 +1,10 @@
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterOutlet} from '@angular/router';
-import {EmployeeListComponent} from "./employee-list/employee-list.component";
 
 @Component({
     selector: 'app-root',
-    imports: [CommonModule, EmployeeListComponent],
+  imports: [CommonModule, RouterOutlet],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css'
 })

src/app/app.routes.ts

@@ -1,3 +1,10 @@
 import {Routes} from '@angular/router';
+import {EmployeeListComponent} from "./employee-list/employee-list.component";
+import {LoginComponent} from "./login/login.component";
+import {AuthGuardService} from "./auth-guard.service";
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {path: 'login', component: LoginComponent},
+  {path: '', component: EmployeeListComponent, canActivate: [AuthGuardService]},
+  {path: '**', redirectTo: ''}
+];

src/app/auth-guard.service.ts

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {AuthService} from "./services/auth.service";
+import {Router} from "@angular/router";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardService {
+  constructor(public auth: AuthService, public router: Router) {
+  }
+
+  canActivate(): boolean {
+    if (!this.auth.isAuthenticated()) {
+      this.router.navigate(['login']);
+
+      return false;
+    }
+    return true;
+  }
+}

src/app/employee-list/employee-list.component.spec.ts

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

src/app/login/login.component.html

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

src/app/login/login.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  imports: [],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.css'
+})
+export class LoginComponent {
+
+}

src/app/services/auth.service.ts

@@ -0,0 +1,10 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  public isAuthenticated(): boolean {
+    return false;
+  }
+}