chore(dev-app): add lazy loading (#15522)

* dev-app: add lazy loading

* fix snackbar RTL

* fix lint

* fix aot build

Author: mmalerba

.github/CODEOWNERS

@@ -111,7 +111,7 @@
 /src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
 /src/dev-app/dataset/**                            @andrewseguin
 /src/dev-app/datepicker/**                         @mmalerba
-/src/dev-app/dev-app-layout/**                     @mmalerba
+/src/dev-app/dev-app/**                            @mmalerba
 /src/dev-app/dialog/**                             @jelbourn @crisbeto
 /src/dev-app/drag-drop/**                          @crisbeto
 /src/dev-app/drawer/**                             @mmalerba

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

@@ -16,6 +16,7 @@ import {
   MatFormFieldModule,
   MatInputModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {AutocompleteDemo} from './autocomplete-demo';
 
 @NgModule({
@@ -28,6 +29,7 @@ import {AutocompleteDemo} from './autocomplete-demo';
     MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: AutocompleteDemo}]),
   ],
   declarations: [AutocompleteDemo],
 })

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

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BadgeDemo} from './badge-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {BadgeDemo} from './badge-demo';
     MatBadgeModule,
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: BadgeDemo}]),
   ],
   declarations: [BadgeDemo],
 })

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

@@ -17,6 +17,7 @@ import {
   MatSelectModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BaselineDemo} from './baseline-demo';
 
 @NgModule({
@@ -29,6 +30,7 @@ import {BaselineDemo} from './baseline-demo';
     MatRadioModule,
     MatSelectModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: BaselineDemo}]),
   ],
   declarations: [BaselineDemo],
 })

src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts

@@ -20,6 +20,7 @@ import {
   MatListModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
 
 @NgModule({
@@ -35,6 +36,7 @@ import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo';
     MatInputModule,
     MatListModule,
     MatSelectModule,
+    RouterModule.forChild([{path: '', component: BottomSheetDemo}]),
   ],
   declarations: [BottomSheetDemo, ExampleBottomSheet],
   entryComponents: [ExampleBottomSheet],

src/dev-app/button-toggle/button-toggle-demo-module.ts

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule, MatCheckboxModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonToggleDemo} from './button-toggle-demo';
 
 @NgModule({
@@ -19,6 +20,7 @@ import {ButtonToggleDemo} from './button-toggle-demo';
     MatButtonToggleModule,
     MatCheckboxModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonToggleDemo}]),
   ],
   declarations: [ButtonToggleDemo],
 })

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

@@ -8,12 +8,14 @@
 
 import {NgModule} from '@angular/core';
 import {MatButtonModule, MatIconModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ButtonDemo} from './button-demo';
 
 @NgModule({
   imports: [
     MatButtonModule,
     MatIconModule,
+    RouterModule.forChild([{path: '', component: ButtonDemo}]),
   ],
   declarations: [ButtonDemo],
 })

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

@@ -13,6 +13,7 @@ import {
   MatDividerModule,
   MatProgressBarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CardDemo} from './card-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {CardDemo} from './card-demo';
     MatCardModule,
     MatDividerModule,
     MatProgressBarModule,
+    RouterModule.forChild([{path: '', component: CardDemo}]),
   ],
   declarations: [CardDemo],
 })

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

@@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
 
 @NgModule({
@@ -18,6 +19,7 @@ import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
     FormsModule,
     MatCheckboxModule,
     MatPseudoCheckboxModule,
+    RouterModule.forChild([{path: '', component: CheckboxDemo}]),
   ],
   declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist],
 })

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

@@ -18,6 +18,7 @@ import {
   MatIconModule,
   MatToolbarModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ChipsDemo} from './chips-demo';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {ChipsDemo} from './chips-demo';
     MatFormFieldModule,
     MatIconModule,
     MatToolbarModule,
+    RouterModule.forChild([{path: '', component: ChipsDemo}]),
   ],
   declarations: [ChipsDemo],
 })

src/dev-app/connected-overlay/connected-overlay-demo-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {ConnectedOverlayDemo} from './connected-overlay-demo';
 
 @NgModule({
@@ -21,6 +22,7 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo';
     MatCheckboxModule,
     MatRadioModule,
     OverlayModule,
+    RouterModule.forChild([{path: '', component: ConnectedOverlayDemo}]),
   ],
   declarations: [ConnectedOverlayDemo],
 })

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

@@ -16,8 +16,10 @@ import {
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
+  MatNativeDateModule,
   MatSelectModule
 } from '@angular/material';
+import {RouterModule} from '@angular/router';
 import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo';
 
 @NgModule({
@@ -30,8 +32,10 @@ import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatNativeDateModule,
     MatSelectModule,
     ReactiveFormsModule,
+    RouterModule.forChild([{path: '', component: DatepickerDemo}]),
   ],
   declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo],
   entryComponents: [CustomHeader, CustomHeaderNgContent],

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

@@ -17,24 +17,3 @@ import {Component, ViewEncapsulation} from '@angular/core';
 })
 export class DevAppComponent {
 }
-
-
-/** Home component which includes a welcome message for the dev-app. */
-@Component({
-  selector: 'home',
-  template: `
-    <p>Welcome to the development demos for Angular Material!</p>
-    <p>Open the sidenav to select a demo.</p>
-  `,
-})
-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/dev-app.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@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/dev-app/dev-app-404.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {EventEmitter, Injectable, OnDestroy} from '@angular/core';
+
+@Injectable()
+export class DevAppDirectionality implements Directionality, OnDestroy {
+  readonly change = new EventEmitter<Direction>();
+
+  get value(): Direction {
+    return this._value;
+  }
+  set value(value: Direction) {
+    this._value = value;
+    this.change.next(value);
+  }
+  private _value: Direction = 'ltr';
+
+  ngOnDestroy() {
+    this.change.complete();
+  }
+}