build: move server rendering to dist (#4822)

* build: move server rendering to dist

* Verifying that Material works with `platform-server` now happens in the `dist/` folder (instead of the src/ folder)
* Adds a gulp task to build the universal application. In the future serving the app will be also part of this

* Address comments

tools/gulp/gulpfile.ts

@@ -19,3 +19,4 @@ import './tasks/aot';
 import './tasks/payload';
 import './tasks/coverage';
 import './tasks/material-release';
+import './tasks/universal';

tools/gulp/tasks/ci.ts

@@ -16,3 +16,6 @@ task('ci:payload', ['payload']);
 
 /** Task that uploads the coverage results to a firebase database. */
 task('ci:coverage', ['coverage:upload']);
+
+/** Task that verifies if all Material components are working with platform-server.*/
+task('ci:prerender', ['universal:test-prerender']);

tools/gulp/tasks/universal.ts

@@ -0,0 +1,44 @@
+import {task} from 'gulp';
+import {DIST_RELEASES, DIST_ROOT, SOURCE_ROOT} from '../constants';
+import {ngcBuildTask, tsBuildTask, copyTask, sequenceTask, execTask} from '../util/task_helpers';
+import {join} from 'path';
+import {copySync} from 'fs-extra';
+
+const appDir = join(SOURCE_ROOT, 'universal-app');
+const outDir = join(DIST_ROOT, 'packages', 'universal-app');
+
+/** Path to the universal-app tsconfig files. */
+const tsconfigAppPath = join(appDir, 'tsconfig-build.json');
+const tsconfigPrerenderPath = join(outDir, 'tsconfig-prerender.json');
+
+/** Glob that matches all assets that need to copied to the dist. */
+const assetsGlob = join(appDir, '**/*.+(html|css|json)');
+
+/** Path to the file that prerenders the universal app using platform-server. */
+const prerenderFile = join(appDir, 'prerender.ts');
+
+/** Path to the compiled prerender file. Running this file just dumps the HTML output for now. */
+const prerenderOutFile = join(outDir, 'prerender.js');
+
+task('universal:test-prerender', ['universal:build'], execTask('node', [prerenderOutFile]));
+
+task('universal:build', sequenceTask(
+  'clean',
+  ['material:build-release', 'cdk:build-release'],
+  'universal:copy-release',
+  ['universal:build-app-ts', 'universal:copy-app-assets', 'universal:copy-prerender-source'],
+  'universal:build-prerender-ts'
+));
+
+task('universal:build-app-ts', ngcBuildTask(tsconfigAppPath));
+task('universal:copy-app-assets', copyTask(assetsGlob, outDir));
+
+task('universal:build-prerender-ts', tsBuildTask(tsconfigPrerenderPath));
+task('universal:copy-prerender-source', copyTask(prerenderFile, outDir));
+
+// 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(DIST_RELEASES, 'material'), join(outDir, 'material'));
+  copySync(join(DIST_RELEASES, 'cdk'), join(outDir, 'cdk'));
+});

tools/gulp/util/task_helpers.ts

@@ -37,6 +37,10 @@ export function tsBuildTask(tsConfigPath: string) {
   return execNodeTask('typescript', 'tsc', ['-p', tsConfigPath]);
 }
 
+/** Creates a task that runs the Angular compiler CLI. */
+export function ngcBuildTask(tsConfigPath: string) {
+  return execNodeTask('@angular/compiler-cli', 'ngc', ['-p', tsConfigPath]);
+}
 
 /** Create a SASS Build Task. */
 export function sassBuildTask(dest: string, root: string, minify = false) {