feat: add 404 page

brandonroberts · Mar 9, 2019 · 581be56 · 581be56
1 parent 9a50cd0
commit 581be56
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,23 @@
 # Blog
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.0-beta.0.
+## Setup
 
-## Development server
+```sh
+yarn
+```
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Serve
 
-## Code scaffolding
+```sh
+ng serve
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Navigate to `http://localhost:4200/`. 
 
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+## Build
 
-## Further help
+```sh
+ng build
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { MarkdownModule } from 'ngx-markdown';
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
+import { PageNotFoundComponent } from './core/components';
 
 @NgModule({
   declarations: [
@@ -18,7 +19,8 @@ import { CoreModule } from './core/core.module';
     HttpClientModule,
     RouterModule.forRoot([
       { path: '', redirectTo: '/blog', pathMatch: 'full' },
-      { path: 'blog', loadChildren: './blog/blog.module#BlogModule' }
+      { path: 'blog', loadChildren: './blog/blog.module#BlogModule' },
+      { path: '**', component: PageNotFoundComponent }
     ]),
     MarkdownModule.forRoot({
       loader: HttpClient

diff --git a/src/app/core/components/index.ts b/src/app/core/components/index.ts
@@ -1 +1,2 @@
-export * from './layout/layout.component';
+export * from './layout/layout.component';
+export * from './page-not-found/page-not-found.component';
diff --git a/src/app/core/components/page-not-found/page-not-found.component.ts b/src/app/core/components/page-not-found/page-not-found.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  template: `
+    <h2>Whoops...</h2>
+    <hr>
+
+    Page Not Found
+  `,
+  styles: []
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
@@ -4,11 +4,12 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
-import { LayoutComponent } from './components';
+import { LayoutComponent, PageNotFoundComponent } from './components';
 
 @NgModule({
   declarations: [
-    LayoutComponent
+    LayoutComponent,
+    PageNotFoundComponent
   ],
   imports: [
     CommonModule,
@@ -18,7 +19,7 @@ import { LayoutComponent } from './components';
     MatButtonModule,
     MatSidenavModule,
     MatIconModule,
-    MatListModule,
+    MatListModule
   ],
   exports: [
     LayoutComponent

diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Blog</title>
+  <title>Brandon Roberts</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">