feat(notfound): add NotFound page (#1672)

Author: dizco

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MiscellaneousComponent } from './miscellaneous.component';
+import { NotFoundComponent } from './not-found/not-found.component';
+
+const routes: Routes = [{
+  path: '',
+  component: MiscellaneousComponent,
+  children: [{
+    path: '404',
+    component: NotFoundComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MiscellaneousRoutingModule { }
+
+export const routedComponents = [
+  MiscellaneousComponent,
+  NotFoundComponent,
+];

src/app/pages/miscellaneous/miscellaneous.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-miscellaneous',
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class MiscellaneousComponent {
+}

src/app/pages/miscellaneous/miscellaneous.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+import { MiscellaneousRoutingModule, routedComponents } from './miscellaneous-routing.module';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    MiscellaneousRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class MiscellaneousModule { }

src/app/pages/miscellaneous/not-found/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/pages/miscellaneous/not-found/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/pages/miscellaneous/not-found/not-found.component.ts

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

src/app/pages/pages-menu.ts

@@ -141,6 +141,16 @@ export const MENU_ITEMS: NbMenuItem[] = [
       },
     ],
   },
+  {
+    title: 'Miscellaneous',
+    icon: 'nb-shuffle',
+    children: [
+      {
+        title: '404',
+        link: '/pages/miscellaneous/404',
+      },
+    ],
+  },
   {
     title: 'Auth',
     icon: 'nb-locked',

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 { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
 
 const routes: Routes = [{
   path: '',
@@ -31,10 +32,16 @@ const routes: Routes = [{
   }, {
     path: 'tables',
     loadChildren: './tables/tables.module#TablesModule',
+  }, {
+    path: 'miscellaneous',
+    loadChildren: './miscellaneous/miscellaneous.module#MiscellaneousModule',
   }, {
     path: '',
     redirectTo: 'dashboard',
     pathMatch: 'full',
+  }, {
+    path: '**',
+    component: NotFoundComponent,
   }],
 }];
 

src/app/pages/pages.module.ts

@@ -4,6 +4,7 @@ import { PagesComponent } from './pages.component';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
+import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
@@ -14,6 +15,7 @@ const PAGES_COMPONENTS = [
     PagesRoutingModule,
     ThemeModule,
     DashboardModule,
+    MiscellaneousModule,
   ],
   declarations: [
     ...PAGES_COMPONENTS,