feat(notfound): add NotFound component

src/app/@theme/components/index.ts

@@ -4,3 +4,4 @@ export * from './search-input/search-input.component';
 export * from './tiny-mce/tiny-mce.component';
 export * from './theme-settings/theme-settings.component';
 export * from './theme-switcher/theme-switcher.component';
+export * from './page-not-found/page-not-found.component';

src/app/@theme/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,15 @@
+<div class="row">
+  <div class="col-md-12">
+    <nb-card>
+      <nb-card-body>
+        <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
+          <h2 class="title">404 Page Not Found</h2>
+          <small class="sub-title">The page you were looking for doesn't exist</small>
+          <button (click)="goToHome()" type="button" class="btn btn-block btn-hero-primary">
+            Take me home
+          </button>
+        </div>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

src/app/@theme/components/page-not-found/page-not-found.component.scss

@@ -0,0 +1,20 @@
+.flex-centered {
+  margin: auto;
+}
+nb-card-body {
+  display: flex;
+}
+
+.title {
+  text-align: center;
+}
+
+.sub-title {
+  text-align: center;
+  display: block;
+  margin-bottom: 3rem;
+}
+
+.btn {
+  margin-bottom: 2rem;
+}

src/app/@theme/components/page-not-found/page-not-found.component.ts

@@ -0,0 +1,17 @@
+import { NbMenuService } from '@nebular/theme';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-page-not-found',
+  styleUrls: ['./page-not-found.component.scss'],
+  templateUrl: './page-not-found.component.html',
+})
+export class PageNotFoundComponent {
+
+  constructor(private menuService: NbMenuService) {
+  }
+
+  goToHome() {
+    this.menuService.navigateHome();
+  }
+}

src/app/@theme/theme.module.ts

@@ -28,6 +28,7 @@ import {
   ThemeSettingsComponent,
   ThemeSwitcherComponent,
   TinyMCEComponent,
+  PageNotFoundComponent,
 } from './components';
 import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
 import {
@@ -65,6 +66,7 @@ const COMPONENTS = [
   SearchInputComponent,
   ThemeSettingsComponent,
   TinyMCEComponent,
+  PageNotFoundComponent,
   OneColumnLayoutComponent,
   SampleLayoutComponent,
   ThreeColumnsLayoutComponent,

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

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { PageNotFoundComponent } from '../@theme/components';
 
 const routes: Routes = [{
   path: '',
@@ -35,6 +36,9 @@ const routes: Routes = [{
     path: '',
     redirectTo: 'dashboard',
     pathMatch: 'full',
+  }, {
+    path: '**',
+    component: PageNotFoundComponent,
   }],
 }];