build: fix universal prerendering task (#4931)

Fixes the Universal Prerendering task by using the same workaround as for the AOT job (building sources in the output directory already)

Building the sources in the output directory (similar as for the AOT task) is theonly known workaround for angular/angular#12249

Author: devversion

package-lock.json

@@ -111,6 +111,7 @@
     "sorcery": "^0.10.0",
     "stylelint": "^7.10.1",
     "ts-node": "^3.0.4",
+    "tsconfig-paths": "^2.2.0",
     "tslint": "^5.2.0",
     "typescript": "~2.2.1",
     "uglify-js": "^2.8.14",

package.json

@@ -1,12 +1,13 @@
-// TypeScript config file that is used to compile the universal-app.
+// TypeScript config file that is used to compile the Universal App. All sources are compiled
+// inside of the output folder and therefore all paths can be relative to the output folder.
 {
   "compilerOptions": {
     "declaration": true,
     "stripInternal": false,
     "experimentalDecorators": true,
     "module": "commonjs",
     "moduleResolution": "node",
-    "outDir": "../../dist/packages/universal-app",
+    "outDir": ".",
     "rootDir": ".",
     "sourceMap": true,
     "target": "es2015",
@@ -23,7 +24,6 @@
     "main.ts"
   ],
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
-    "genDir": "../../dist/packages/universal-app"
+    "annotateForClosureCompiler": true
   }
 }

src/universal-app/tsconfig-build.json

@@ -7,34 +7,39 @@ 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');
+// Paths to the different tsconfig files of the Universal app.
+// Building the sources in the output directory is part of the workaround for
+// https://github.com/angular/angular/issues/12249
+const tsconfigAppPath = join(outDir, '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 that builds the universal-app and runs the prerender script. */
+task('universal:test-prerender', ['universal:build'], execTask(
+  // Runs node with the tsconfig-paths module to alias the @angular/material dependency.
+  'node', ['-r', 'tsconfig-paths/register', prerenderOutFile], {
+    env: {TS_NODE_PROJECT: tsconfigPrerenderPath}
+  }
+));
 
 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:copy-release', 'universal:copy-files'],
+  'universal:build-app-ts',
   'universal:build-prerender-ts'
 ));
 
+/** Task that builds the universal app in the output directory. */
 task('universal:build-app-ts', ngcBuildTask(tsconfigAppPath));
-task('universal:copy-app-assets', copyTask(assetsGlob, outDir));
 
+/** Task that copies all files to the output directory. */
+task('universal:copy-files', copyTask(appDir, outDir));
+
+/** Task that builds the prerender script in the output directory. */
 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.

tools/gulp/tasks/universal.ts

@@ -61,12 +61,15 @@ export interface ExecTaskOptions {
   silentStdout?: boolean;
   // If an error happens, this will replace the standard error.
   errMessage?: string;
+  // Environment variables being passed to the child process.
+  env?: any;
 }
 
 /** Create a task that executes a binary as if from the command line. */
 export function execTask(binPath: string, args: string[], options: ExecTaskOptions = {}) {
   return (done: (err?: string) => void) => {
-    const childProcess = child_process.spawn(binPath, args);
+    const env = Object.assign({}, process.env, options.env);
+    const childProcess = child_process.spawn(binPath, args, {env});
 
     if (!options.silentStdout && !options.silent) {
       childProcess.stdout.on('data', (data: string) => process.stdout.write(data));