Merge pull request #44 from LotteHofstede/w2p-38248_PageNotFound-component

PageNotFound Component

e2e/pagenotfound/pagenotfound.e2e-spec.ts

@@ -0,0 +1,19 @@
+import { ProtractorPage } from './pagenotfound.po';
+
+describe('protractor PageNotFound', function() {
+  let page: ProtractorPage;
+
+  beforeEach(() => {
+    page = new ProtractorPage();
+  });
+
+  it('should contain element ds-pagenotfound when navigating to page that doesnt exist"', () => {
+    page.navigateToNonExistingPage();
+    expect(page.elementTagExists("ds-pagenotfound")).toEqual(true);
+  });
+
+  it('should not contain element ds-pagenotfound when navigating to existing page"', () => {
+    page.navigateToExistingPage();
+    expect(page.elementTagExists("ds-pagenotfound")).toEqual(false);
+  });
+});

e2e/pagenotfound/pagenotfound.po.ts

@@ -0,0 +1,19 @@
+import { browser, element, by } from 'protractor';
+
+export class ProtractorPage {
+  HOMEPAGE : string = "/home";
+  NONEXISTINGPAGE : string = "/e9019a69-d4f1-4773-b6a3-bd362caa46f2";
+
+  navigateToNonExistingPage() {
+    return browser.get(this.NONEXISTINGPAGE);
+  }
+  navigateToExistingPage() {
+    return browser.get(this.HOMEPAGE);
+  }
+
+  elementTagExists(tag : string) {
+    return element(by.tagName(tag)).isPresent();
+  }
+
+
+}

resources/i18n/en.json

@@ -1,13 +1,19 @@
 {
   "title": "DSpace",
-
   "nav": {
     "home": "Home"
   },
-
   "example": {
     "with": {
       "data": "{{greeting}}, {{recipient}}!"
     }
+  },
+
+  "404": {
+    "help": "We can't find the page you're looking for. The page may have been moved or deleted. You can use the button below to get back to the home page. ",
+    "page-not-found": "page not found",
+    "link": {
+      "home-page": "Take me to the home page"
+    }
   }
 }

src/app/app-routing.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', redirectTo: '/home', pathMatch: 'full' }
+      { path: '', redirectTo: '/home', pathMatch: 'full' },
+      { path: '**', pathMatch: 'full', component: PageNotFoundComponent},
     ])
   ],
 })

src/app/app.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { HomeModule } from './home/home.module';
 
+
 import { SharedModule } from './shared/shared.module';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
+import { PageNotFoundComponent } from './pagenotfound/pagenotfound.component';
 
 import { StoreModule } from "@ngrx/store";
 import { RouterStoreModule } from "@ngrx/router-store";
@@ -17,7 +19,8 @@ import { effects } from './app.effects';
 @NgModule({
   declarations: [
     AppComponent,
-    HeaderComponent
+    HeaderComponent,
+    PageNotFoundComponent
   ],
   imports: [
     SharedModule,

src/app/pagenotfound/pagenotfound.component.html

@@ -0,0 +1,10 @@
+<div class="page-not-found">
+  <h1>404</h1>
+  <h2><small>{{"404.page-not-found" | translate}}</small></h2>
+  <br>
+  <p>{{"404.help" | translate}}</p>
+  <br>
+  <p class="text-center">
+    <a routerLink="/home" class="btn btn-primary">{{"404.link.home-page" | translate}}</a>
+  </p>
+</div>

src/app/pagenotfound/pagenotfound.component.scss

@@ -0,0 +1 @@
+@import '../../styles/variables.scss';

src/app/pagenotfound/pagenotfound.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-pagenotfound',
+  styleUrls: ['./pagenotfound.component.css'],
+  templateUrl: './pagenotfound.component.html'
+})
+export class PageNotFoundComponent {
+
+  data: any = {};
+
+  constructor() {
+    this.universalInit();
+  }
+
+  universalInit() {
+
+  }
+
+}

src/server.routes.ts

@@ -10,5 +10,5 @@
  * ];
  **/
 export const routes: string[] = [
-  'home'
+  'home', '**'
 ];