build: add 404 page to dev app (#14551)

Currently misspelling a URL in the dev app results in a few seconds of staring into a blank screen since Angular just throws an error in the background. These changes add a 404 page to make it easier to figure out what's wrong.

Author: crisbeto

src/dev-app/dev-app-module.ts

@@ -27,7 +27,7 @@ import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox/checkbox-
 import {ChipsDemo} from './chips/chips-demo';
 import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
 import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker/datepicker-demo';
-import {DevAppComponent, DevAppHome} from './dev-app';
+import {DevAppComponent, DevAppHome, DevApp404} from './dev-app';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
 import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
 import {DrawerDemo} from './drawer/drawer-demo';
@@ -99,6 +99,7 @@ import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
     DatepickerDemo,
     DevAppComponent,
     DevAppHome,
+    DevApp404,
     DialogDemo,
     DragAndDropDemo,
     DrawerDemo,

src/dev-app/dev-app.ts

@@ -110,3 +110,13 @@ export class DevAppComponent {
   `,
 })
 export class DevAppHome {}
+
+@Component({
+  template: `
+    <h1>404</h1>
+    <p>This page does not exist</p>
+    <a mat-raised-button routerLink="/">Go back to the home page</a>
+  `,
+  host: {'class': 'mat-typography'},
+})
+export class DevApp404 {}

src/dev-app/routes.ts

@@ -18,7 +18,7 @@ import {CheckboxDemo} from './checkbox/checkbox-demo';
 import {ChipsDemo} from './chips/chips-demo';
 import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
-import {DevAppHome} from './dev-app';
+import {DevAppHome, DevApp404} from './dev-app';
 import {DialogDemo} from './dialog/dialog-demo';
 import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
 import {DrawerDemo} from './drawer/drawer-demo';
@@ -103,4 +103,5 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'connected-overlay', component: ConnectedOverlayDemo},
   {path: 'virtual-scroll', component: VirtualScrollDemo},
   {path: 'examples', component: ExamplesPage},
+  {path: '**', component: DevApp404},
 ];