diff --git a/src/universal-app/index.html b/src/universal-app/index.html index 5a2433c6d303..2457d24e2f98 100644 --- a/src/universal-app/index.html +++ b/src/universal-app/index.html @@ -8,8 +8,27 @@ + + - Loading... + Loading... diff --git a/src/universal-app/kitchen-sink-root.ts b/src/universal-app/kitchen-sink-root.ts new file mode 100644 index 000000000000..6db59d94465b --- /dev/null +++ b/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: ` +

Kitchen sink app

+ + `, +}) +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 { +} diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index b0b3a622b7d7..61c3c7292faa 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -1,5 +1,3 @@ -

Kitchen sink app

-

Autocomplete

Grace Hopper @@ -375,7 +373,7 @@

Drag and Drop

Virtual scroll

- +
Item #{{i}}
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 2a862b3f41ae..aca9d14ea4f0 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/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 { @@ -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 { +} diff --git a/src/universal-app/main.ts b/src/universal-app/main.ts index a605538f8e99..927d9a220778 100644 --- a/src/universal-app/main.ts +++ b/src/universal-app/main.ts @@ -1 +1,2 @@ export * from './kitchen-sink/kitchen-sink'; +export * from './kitchen-sink-root'; diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts index b064ccd438d7..bf668a74714e 100644 --- a/src/universal-app/prerender.ts +++ b/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.'); }) diff --git a/src/universal-app/tsconfig-build.json b/src/universal-app/tsconfig-build.json index 7234e84a5f0d..c0ee8e08b115 100644 --- a/src/universal-app/tsconfig-build.json +++ b/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": [ diff --git a/src/universal-app/tsconfig-prerender.json b/src/universal-app/tsconfig-prerender.json index b70a9d625772..d998f1fb1c9d 100644 --- a/src/universal-app/tsconfig-prerender.json +++ b/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": [ diff --git a/src/universal-app/tsconfig.json b/src/universal-app/tsconfig.json index 9e03ecf0a6c0..1b0158f2a00f 100644 --- a/src/universal-app/tsconfig.json +++ b/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"] diff --git a/tools/gulp/tasks/universal.ts b/tools/gulp/tasks/universal.ts index 43aae6405ef2..b4876e77e8d4 100644 --- a/tools/gulp/tasks/universal.ts +++ b/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')); });