add error page for invalid urls

ui/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { navbarRoute } from './layout/navbar/navbar.route'
+import { errorRoutes } from './error/error.route'
 
 const routes: Routes = [
   {
@@ -14,7 +15,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [RouterModule.forRoot([...routes, navbarRoute])],
+  imports: [RouterModule.forRoot([...routes, ...errorRoutes, navbarRoute])],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

ui/src/app/error/error-alert.component.ts

@@ -18,7 +18,6 @@ export class ErrorAlertComponent implements OnInit {
 
   ngOnInit(): void {
     this.sub = this.errorService.on().subscribe((err: AppError) => {
-      const alerts = [...this.alerts]
       const alert: ErrorAlert = {
         type: 'danger',
         msg: err.message,

ui/src/app/error/error.component.html

@@ -1 +1,17 @@
-<p>error works!</p>
+<div class="container">
+  <div class="row">
+    <div class="col-md-12 mt-4">
+      <h1 jhiTranslate="error.title.string" class="mb-3.string">Your request cannot be processed</h1>
+
+      <div [hidden]="!errorMessage">
+        <div class="alert alert-danger">{{ errorMessage }}</div>
+      </div>
+      <div [hidden]="!error403" class="alert alert-danger" jhiTranslate="error.http.403.string">
+        You are not authorized to access this page.
+      </div>
+      <div [hidden]="!error404" class="alert alert-danger" jhiTranslate="error.http.404.string">
+        The page does not exist.
+      </div>
+    </div>
+  </div>
+</div>

ui/src/app/error/error.component.spec.ts

@@ -1,13 +1,15 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ErrorComponent } from './error.component';
+import { AppModule } from '../app.module';
 
 describe('ErrorComponent', () => {
   let component: ErrorComponent;
   let fixture: ComponentFixture<ErrorComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [AppModule],
       declarations: [ErrorComponent]
     });
     fixture = TestBed.createComponent(ErrorComponent);

ui/src/app/error/error.component.ts

@@ -1,9 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AccountService } from '../account';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html'
 })
-export class ErrorComponent {
+export class ErrorComponent implements OnInit {
+  errorMessage: string | undefined;
+  error403: boolean | undefined;
+  error404: boolean | undefined;
 
+  constructor(private route: ActivatedRoute, private accountService: AccountService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe(routeData => {
+      if (routeData['error403']) {
+        this.error403 = routeData['error403'];
+      }
+      if (routeData['error404']) {
+        this.error404 = routeData['error404'];
+      }
+      if (routeData['errorMessage']) {
+        this.errorMessage = routeData['errorMessage'];
+      }
+    });
+  }
 }

ui/src/app/error/error.route.ts

@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+
+import { ErrorComponent } from './error.component';
+
+export const errorRoutes: Routes = [
+  {
+    path: 'error',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string'
+    }
+  },
+  {
+    path: 'accessdenied',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error403: true
+    }
+  },
+  {
+    path: '404',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error404: true
+    }
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];