feat(404): added 404 page error

Author: Ismaestro

src/app/app-routing.module.ts

@@ -3,11 +3,16 @@ import {RouterModule, Routes} from '@angular/router';
 
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
 import {AppConfig} from './config/app.config';
+import {Error404Component} from './core/error404/error-404.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/', pathMatch: 'full'},
   {path: '', component: HeroTopComponent},
-  {path: AppConfig.routes.heroes, loadChildren: './heroes/heroes.module#HeroesModule'}
+  {path: AppConfig.routes.heroes, loadChildren: './heroes/heroes.module#HeroesModule'},
+  {path: AppConfig.routes.error404, component: Error404Component},
+
+  // otherwise redirect to 404
+  {path: '**', redirectTo: '/' + AppConfig.routes.error404}
 ];
 
 @NgModule({

src/app/config/app.config.ts

@@ -6,7 +6,8 @@ export let APP_CONFIG = new InjectionToken('app.config');
 
 export const AppConfig: IAppConfig = {
   routes: {
-    heroes: 'heroes'
+    heroes: 'heroes',
+    error404: '404'
   },
   endpoints: {
     heroes: 'https://nodejs-example-app.herokuapp.com/heroes'

src/app/core/core.module.ts

@@ -10,6 +10,7 @@ import {FooterComponent} from './footer/footer.component';
 import {SharedModule} from '../shared/modules/shared.module';
 import {RouterModule} from '@angular/router';
 import {SearchBarComponent} from './search-bar/search-bar.component';
+import {Error404Component} from './error404/error-404.component';
 
 
 @NgModule({
@@ -27,7 +28,8 @@ import {SearchBarComponent} from './search-bar/search-bar.component';
   declarations: [
     NavComponent,
     FooterComponent,
-    SearchBarComponent
+    SearchBarComponent,
+    Error404Component
   ],
   providers: [
     LoggerService

src/app/core/error404/error-404.component.html

@@ -0,0 +1,3 @@
+<h1 class="section-title">{{'error404' | translate}}</h1>
+<p class="explanation">{{'mayTheForce' | translate}}</p>
+<img src="assets/images/404.gif">

src/app/core/error404/error-404.component.scss

@@ -0,0 +1,11 @@
+img {
+  margin: 0 auto;
+  display: block;
+}
+
+.explanation {
+  margin: 1em 0;
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: 300;
+}

src/app/core/error404/error-404.component.spec.ts

@@ -0,0 +1,42 @@
+import {async, TestBed} from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {TranslateModule} from '@ngx-translate/core';
+import {APP_CONFIG, AppConfig} from '../../config/app.config';
+import {HeroService} from '../../heroes/shared/hero.service';
+import {MaterialModule} from '../../shared/modules/material.module';
+import {ProgressBarService} from '../../shared/services/progress-bar.service';
+import {TestsModule} from '../../shared/modules/tests.module';
+import {Error404Component} from './error-404.component';
+
+fdescribe('Error404Component', () => {
+  let fixture;
+  let component;
+  let progressBarService;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestsModule,
+        TranslateModule.forRoot(),
+        MaterialModule
+      ],
+      declarations: [
+        Error404Component
+      ],
+      providers: [
+        {provide: APP_CONFIG, useValue: AppConfig},
+        HeroService,
+        ProgressBarService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Error404Component);
+    component = fixture.debugElement.componentInstance;
+    progressBarService = TestBed.get(ProgressBarService);
+  }));
+
+  it('should create nav component', (() => {
+    expect(component).toBeTruthy();
+  }));
+});

src/app/core/error404/error-404.component.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-error-404',
+  templateUrl: './error-404.component.html',
+  styleUrls: ['./error-404.component.scss']
+})
+
+export class Error404Component {
+  constructor() {
+  }
+}

src/assets/i18n/en.json

@@ -47,5 +47,7 @@
   "yes": "Yes",
   "heroRemoved": "Hero has gone :(",
   "heroDetail": "Hero detail",
+  "error404": "404 Error",
+  "mayTheForce": "May the force be with you",
   "updateBrowser": "You are using an old browser, please update it and reload the page."
 }

src/assets/i18n/es.json

@@ -47,5 +47,7 @@
   "yes": "Yes",
   "heroRemoved": "El heroe nos ha dejado :(",
   "heroDetail": "Detalle del heroe",
+  "error404": "Error 404",
+  "mayTheForce": "Que la fuerza te acompañe",
   "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página."
 }

src/assets/i18n/pt-br.json

@@ -46,5 +46,8 @@
   "no": "Não",
   "yes": "Sim",
   "heroRemoved": "O herói se foi :(",
-  "heroDetail": "Detalhes do herói"
+  "heroDetail": "Detalhes do herói",
+  "error404": "Erro 404",
+  "mayTheForce": "Que a força te acompanhe",
+  "updateBrowser": "Você está usando um navegador antigo, atualize a versão e recarregue a página."
 }