Add 404 page

src/app/app-routing.module.ts

@@ -28,6 +28,7 @@ import { EngagementsComponent } from './pages/tables/engagements/engagements.com
 import { BikeEventsComponent } from './pages/tables/bike-events/bike-events.component';
 import { BikeEventComponent } from './pages/dataPages/bike-event/bike-event.component';
 import { BikeEventTypesComponent } from './pages/tables/bike-event-types/bike-event-types.component';
+import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -60,7 +61,7 @@ const routes: Routes = [
   { path: 'table/workshopTypes', component: WorkshopTypesComponent, canActivate: [AuthGuard] },
   { path: '', redirectTo: 'tableOverview', pathMatch: 'full' },
   { path: 'table', redirectTo: 'tableOverview', pathMatch: 'full' },
-  { path: '**', redirectTo: 'tableOverview' },
+  { path: '**', component: PageNotFoundComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -91,6 +91,7 @@ import {FormSelectSearchComponent} from './components/from-select-search/form-se
 import {DeleteDialogComponent} from './components/dialogs/delete/delete.dialog.component';
 import {AddDialogComponent} from './components/dialogs/add/add.dialog.component';
 import {EditDialogComponent} from './components/dialogs/edit/edit.dialog.component';
+import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 
 
 @NgModule({
@@ -141,6 +142,7 @@ import {EditDialogComponent} from './components/dialogs/edit/edit.dialog.compone
     BikeEventTypesComponent,
     WorkshopTypesComponent,
     FilterRowComponent,
+    PageNotFoundComponent,
   ],
   imports: [
     BrowserModule,

src/app/pages/page-not-found/page-not-found.component.html

@@ -0,0 +1,10 @@
+<div class="page-wrapper">
+  <div class="text-box">
+    <h1>404 Die angeforderte Seite konnte nicht gefunden werden.</h1>
+    <br />
+    <a mat-button routerLink="">Zur Seitenübersicht</a>
+  </div>
+  <div class="img-box">
+    <img src="../../assets/404.png" />
+  </div>
+</div>

src/app/pages/page-not-found/page-not-found.component.scss

@@ -0,0 +1,32 @@
+.page-wrapper {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  .text-box {
+    flex: none;
+    margin: 1em;
+  }
+  .img-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    img {
+      align-self: center;
+      animation-name: translate; // Name der Animation
+      animation-duration: 10s; // Dauer der Animation
+      animation-iteration-count: 1; // Anzahl der Wiederholungen
+    }
+  }
+}
+
+@keyframes translate {
+  0% {
+    transform: translate(200vh, -25vh);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}

src/app/pages/page-not-found/page-not-found.component.spec.ts

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

src/app/pages/page-not-found/page-not-found.component.ts

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