🥅 Add 404 page

src/app/app.routes.ts

@@ -2,9 +2,11 @@ import { Routes } from '@angular/router';
 import { HomePageComponent } from './components/home-page/home-page.component';
 import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component';
 import { LoginPageComponent } from './components/login-page/login-page.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
 
 export const routes: Routes = [
-    {path: '', component: HomePageComponent},
-    {path: 'map', component: LeafletMapComponent},
-    {path: 'sign', component:LoginPageComponent}
+  { path: '', component: HomePageComponent },
+  { path: 'map', component: LeafletMapComponent },
+  { path: 'sign', component: LoginPageComponent },
+  { path: '**', component: NotFoundComponent },
 ];

src/app/components/not-found/not-found.component.html

@@ -0,0 +1,25 @@
+<section class="min-h-[calc(100vh-72px)] bg-gray-900 dark:bg-white">
+  <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+    <div class="mx-auto max-w-screen-sm text-center">
+      <h1
+        class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-white dark:text-gray-900"
+      >
+        404
+      </h1>
+      <p
+        class="mb-4 text-3xl tracking-tight font-bold text-white md:text-4xl dark:text-gray-900"
+      >
+        Something's missing.
+      </p>
+      <p class="mb-4 text-lg font-light text-gray-400 dark:text-gray-500">
+        Sorry, we can't find that page. You'll find lots to explore on the home
+        page.
+      </p>
+      <a
+        href="/"
+        class="inline-flex text-white bg-gray-900 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-900 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-gray-300 my-4"
+        >Back to Homepage</a
+      >
+    </div>
+  </div>
+</section>

src/app/components/not-found/not-found.component.spec.ts

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

src/app/components/not-found/not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  imports: [],
+  templateUrl: './not-found.component.html',
+})
+export class NotFoundComponent {}