cleanup(universal-app): various improvements (#15679)

- Create a separate root component & module
- Add styling to hide overlay so hover styles can be inspected
- Give cdk-virtual-scroll-viewport non-zero height
- Add support for cdk-experimental and material-experimental

src/universal-app/index.html

@@ -8,8 +8,27 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <base href="/">
+
+  <style>
+    /* Make sure bottom sheet doesn't obscure components. */
+    body {
+      padding-bottom: 80px;
+    }
+
+    /*
+     * Hide the overlay so hover styles can be tested,
+     * but show a message so we can see that the overlay is there.
+     */
+    .cdk-overlay-backdrop {
+      bottom: 100vh !important;
+    }
+    .cdk-overlay-backdrop::after {
+      content: 'OVERLAY ACTIVE';
+      background: lime;
+    }
+  </style>
 </head>
 <body>
-  <kitchen-sink>Loading...</kitchen-sink>
+  <kitchen-sink-root>Loading...</kitchen-sink-root>
 </body>
 </html>

src/universal-app/kitchen-sink-root.ts

@@ -0,0 +1,30 @@
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {ServerModule} from '@angular/platform-server';
+import {KitchenSinkModule} from './kitchen-sink/kitchen-sink';
+
+@Component({
+  selector: 'kitchen-sink-root',
+  template: `
+    <h1>Kitchen sink app</h1>
+    <kitchen-sink></kitchen-sink>
+  `,
+})
+export class KitchenSinkRoot {
+}
+
+@NgModule({
+  imports: [BrowserModule.withServerTransition({appId: 'kitchen-sink'}), KitchenSinkModule],
+  declarations: [KitchenSinkRoot],
+  exports: [KitchenSinkRoot],
+  bootstrap: [KitchenSinkRoot],
+})
+export class KitchenSinkRootModule {
+}
+
+@NgModule({
+  imports: [KitchenSinkRootModule, ServerModule],
+  bootstrap: [KitchenSinkRoot],
+})
+export class KitchenSinkRootServerModule {
+}

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -1,5 +1,3 @@
-<h1>Kitchen sink app</h1>
-
 <h2>Autocomplete</h2>
 <mat-autocomplete>
   <mat-option>Grace Hopper</mat-option>
@@ -375,7 +373,7 @@
 
 <h2>Virtual scroll</h2>
 
-<cdk-virtual-scroll-viewport itemSize="50">
+<cdk-virtual-scroll-viewport itemSize="50" class="universal-viewport">
   <div *cdkVirtualFor="let size of virtualScrollData; let i = index" style="height: 50px">
     Item #{{i}}
   </div>

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -1,12 +1,12 @@
-import {ViewportRuler, ScrollingModule} from '@angular/cdk/scrolling';
-import {
-  CdkTableModule,
-  DataSource
-} from '@angular/cdk/table';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
+import {CdkTableModule, DataSource} from '@angular/cdk/table';
 import {Component, ElementRef, NgModule} from '@angular/core';
 import {
   MatAutocompleteModule,
   MatBadgeModule,
+  MatBottomSheet,
   MatBottomSheetModule,
   MatButtonModule,
   MatButtonToggleModule,
@@ -42,12 +42,7 @@ import {
   MatTabsModule,
   MatToolbarModule,
   MatTooltipModule,
-  MatBottomSheet,
 } from '@angular/material';
-import {BrowserModule} from '@angular/platform-browser';
-import {ServerModule} from '@angular/platform-server';
-import {FocusMonitor} from '@angular/cdk/a11y';
-import {DragDropModule} from '@angular/cdk/drag-drop';
 import {Observable, of as observableOf} from 'rxjs';
 
 export class TableDataSource extends DataSource<any> {
@@ -68,9 +63,14 @@ export class TestEntryComponent {}
 @Component({
   selector: 'kitchen-sink',
   templateUrl: './kitchen-sink.html',
+  styles: [`
+    .universal-viewport {
+      height: 100px;
+      border: 1px solid black;
+    }
+  `]
 })
 export class KitchenSink {
-
   /** List of columns for the CDK and Material table. */
   tableColumns = ['userId'];
 
@@ -102,7 +102,6 @@ export class KitchenSink {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
     MatAutocompleteModule,
     MatBadgeModule,
     MatBottomSheetModule,
@@ -144,15 +143,9 @@ export class KitchenSink {
     CdkTableModule,
     DragDropModule,
   ],
-  bootstrap: [KitchenSink],
   declarations: [KitchenSink, TestEntryComponent],
+  exports: [KitchenSink, TestEntryComponent],
   entryComponents: [TestEntryComponent],
 })
-export class KitchenSinkClientModule { }
-
-
-@NgModule({
-  imports: [KitchenSinkClientModule, ServerModule],
-  bootstrap: [KitchenSink],
-})
-export class KitchenSinkServerModule { }
+export class KitchenSinkModule {
+}

src/universal-app/main.ts

@@ -1 +1,2 @@
 export * from './kitchen-sink/kitchen-sink';
+export * from './kitchen-sink-root';

src/universal-app/prerender.ts

@@ -1,23 +1,26 @@
+import 'reflect-metadata';
+import 'zone.js';
+
 import {renderModuleFactory} from '@angular/platform-server';
 import {readFileSync, writeFileSync} from 'fs-extra';
 import {log} from 'gulp-util';
 import {join} from 'path';
-import 'reflect-metadata';
-import 'zone.js';
-import {KitchenSinkServerModuleNgFactory} from './kitchen-sink/kitchen-sink.ngfactory';
+
+import {KitchenSinkRootServerModuleNgFactory} from './kitchen-sink-root.ngfactory';
 
 // Do not enable production mode, because otherwise the `MatCommonModule` won't execute
 // the browser related checks that could cause NodeJS issues.
 
-const result = renderModuleFactory(KitchenSinkServerModuleNgFactory, {
-  document: readFileSync(join(__dirname, 'index.html'), 'utf-8')
-});
+const result = renderModuleFactory(
+    KitchenSinkRootServerModuleNgFactory,
+    {document: readFileSync(join(__dirname, 'index.html'), 'utf-8')});
 
 result
   .then(content => {
     const filename = join(__dirname, 'index-prerendered.html');
 
-    console.log(`Outputting result to ${filename}`);
+    console.log('Inspect pre-rendered page here:');
+    console.log(`file://${filename}`);
     writeFileSync(filename, content, 'utf-8');
     log('Prerender done.');
   })

src/universal-app/tsconfig-build.json

@@ -24,7 +24,10 @@
     "paths": {
       "@angular/material": ["./material"],
       "@angular/cdk/*": ["./cdk/*"],
-      "@angular/material/*": ["./material/*"]
+      "@angular/material/*": ["./material/*"],
+      "@angular/cdk-experimental": ["./cdk-experimental"],
+      "@angular/cdk-experimental/*": ["./cdk-experimental/*"],
+      "@angular/material-experimental": ["./material-experimental"]
     }
   },
   "files": [

src/universal-app/tsconfig-prerender.json

@@ -23,7 +23,10 @@
     "paths": {
       "@angular/material": ["./material"],
       "@angular/cdk/*": ["./cdk/*"],
-      "@angular/material/*": ["./material/*"]
+      "@angular/material/*": ["./material/*"],
+      "@angular/cdk-experimental": ["./cdk-experimental"],
+      "@angular/cdk-experimental/*": ["./cdk-experimental/*"],
+      "@angular/material-experimental": ["./material-experimental"]
     }
   },
   "files": [

src/universal-app/tsconfig.json

@@ -7,7 +7,10 @@
     "paths": {
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["../lib/*"],
-      "@angular/material": ["../lib/public_api"]
+      "@angular/material": ["../lib/public_api"],
+      "@angular/cdk-experimental": ["../cdk-experimental"],
+      "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
+      "@angular/material-experimental": ["../material-experimental"]
     }
   },
   "include": ["./**/*.ts"]

tools/gulp/tasks/universal.ts

@@ -32,13 +32,20 @@ task('prerender', ['universal:build'], execTask(
   }
 ));
 
-task('universal:build', sequenceTask(
-  'clean',
-  ['material:build-release', 'cdk:build-release'],
-  ['universal:copy-release', 'universal:copy-files'],
-  ['universal:build-app-ts', 'universal:build-app-scss'],
-  'universal:build-prerender-ts',
-));
+task(
+    'universal:build',
+    sequenceTask(
+        'clean',
+        [
+          'cdk:build-release',
+          'material:build-release',
+          'cdk-experimental:build-release',
+          'material-experimental:build-release',
+        ],
+        ['universal:copy-release', 'universal:copy-files'],
+        ['universal:build-app-ts', 'universal:build-app-scss'],
+        'universal:build-prerender-ts',
+        ));
 
 /** Task that builds the universal app in the output directory. */
 task('universal:build-app-ts', ngcBuildTask(tsconfigAppPath));
@@ -55,6 +62,8 @@ task('universal:build-prerender-ts', tsBuildTask(tsconfigPrerenderPath));
 // As a workaround for https://github.com/angular/angular/issues/12249, we need to
 // copy the Material and CDK ESM output inside of the universal-app output.
 task('universal:copy-release', () => {
-  copySync(join(releasesDir, 'material'), join(outDir, 'material'));
   copySync(join(releasesDir, 'cdk'), join(outDir, 'cdk'));
+  copySync(join(releasesDir, 'material'), join(outDir, 'material'));
+  copySync(join(releasesDir, 'cdk-experimental'), join(outDir, 'cdk-experimental'));
+  copySync(join(releasesDir, 'material-experimental'), join(outDir, 'material-experimental'));
 });