build: convert prerender gulp task to bazel (#16943)

Author: devversion

.circleci/config.yml

@@ -255,20 +255,6 @@ jobs:
 
     - run: ./scripts/circleci/run-saucelabs-tests.sh
 
-  # -------------------------------------------------------------------------
-  # Job that pre-render's the universal app with `@angular/platform-server`.
-  # This verifies that Angular Material can be rendered within Node.
-  # -------------------------------------------------------------------------
-  prerender_build:
-    <<: *job_defaults
-    steps:
-    - *checkout_code
-    - *restore_cache
-    - *yarn_download
-    - *yarn_install
-
-    - run: yarn gulp ci:prerender
-
   # ----------------------------------
   # Lint job. Runs the gulp lint task.
   # ----------------------------------
@@ -523,8 +509,6 @@ workflows:
     jobs:
       - e2e_tests:
           filters: *ignore_presubmit_branch_filter
-      - prerender_build:
-          filters: *ignore_presubmit_branch_filter
 
   release_output:
     jobs:

src/universal-app/BUILD.bazel

@@ -0,0 +1,57 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_test")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
+load("//tools:defaults.bzl", "ng_module", "ts_library")
+
+ng_module(
+    name = "kitchen-sink",
+    srcs = [
+        "kitchen-sink-mdc/kitchen-sink-mdc.ts",
+        "kitchen-sink-root.ts",
+        "kitchen-sink/kitchen-sink.ts",
+    ],
+    assets = [
+        "kitchen-sink/kitchen-sink.html",
+        "kitchen-sink-mdc/kitchen-sink-mdc.html",
+    ],
+    deps = [
+        "@npm//@angular/platform-server",
+    ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
+)
+
+ts_library(
+    name = "server",
+    srcs = [
+        "prerender.ts",
+    ],
+    deps = [
+        ":kitchen-sink",
+        "@npm//@angular/platform-server",
+        "@npm//@types/node",
+        "@npm//reflect-metadata",
+        "@npm//zone.js",
+    ],
+)
+
+sass_binary(
+    name = "theme_scss",
+    src = "theme.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material/core:all_themes",
+    ] + MATERIAL_EXPERIMENTAL_SCSS_LIBS,
+)
+
+nodejs_test(
+    name = "server_test",
+    data = [
+        "index.html",
+        ":server",
+        ":theme_scss",
+    ],
+    entry_point = ":prerender.ts",
+)

src/universal-app/DEBUG.md

@@ -0,0 +1,10 @@
+### Debugging the pre-rendered HTML file
+
+Since the pre-rendered HTML file is built through a Bazel test target, the
+generated HTML file will not be stored in a folder of the repository. Instead,
+the file will be stored in the `bazel-out` folder.
+
+You can retrieve the path to the file by either running:
+
+* `bazel test //src/universal-app:server_test --test_output=all`
+* `echo $(bazel info bazel-bin)/src/universal-app/index-prerendered.html`

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

@@ -17,7 +17,8 @@ export class KitchenSinkRoot {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'kitchen-sink'}), KitchenSinkMdcModule,
+    BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
+    KitchenSinkMdcModule,
     KitchenSinkModule
   ],
   declarations: [KitchenSinkRoot],

src/universal-app/prerender.ts

@@ -2,18 +2,20 @@ import 'reflect-metadata';
 import 'zone.js';
 
 import {renderModuleFactory} from '@angular/platform-server';
-import {readFileSync, writeFileSync} from 'fs-extra';
-import {log} from 'gulp-util';
+import {readFileSync, writeFileSync} from 'fs';
 import {join} from 'path';
 
 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.
 
+// Resolve the path to the "index.html" through Bazel runfile resolution.
+const indexHtmlPath = require.resolve('./index.html');
+
 const result = renderModuleFactory(
     KitchenSinkRootServerModuleNgFactory,
-    {document: readFileSync(join(__dirname, 'index.html'), 'utf-8')});
+    {document: readFileSync(indexHtmlPath, 'utf-8')});
 
 result
   .then(content => {
@@ -22,7 +24,7 @@ result
     console.log('Inspect pre-rendered page here:');
     console.log(`file://${filename}`);
     writeFileSync(filename, content, 'utf-8');
-    log('Prerender done.');
+    console.log('Prerender done.');
   })
   // If rendering the module factory fails, exit the process with an error code because otherwise
   // the CI task will not recognize the failure and will show as "success". The error message

src/universal-app/tsconfig-build.json

@@ -29,7 +29,6 @@ import './tasks/example-module';
 import './tasks/lint';
 import './tasks/material-release';
 import './tasks/unit-test';
-import './tasks/universal';
 
 /** Task that builds all available release packages. */
 task('build-release-packages', sequenceTask(

src/universal-app/tsconfig-prerender.json

@@ -12,8 +12,5 @@ task('ci:test', ['test:single-run'], () => process.exit(0));
  */
 task('ci:aot', ['build-aot:no-release-build']);
 
-/** Task that verifies if all Material components are working with platform-server. */
-task('ci:prerender', ['prerender']);
-
 /** Task that builds all release packages. */
 task('ci:build-release-packages', ['build-release-packages']);

src/universal-app/tsconfig.json

@@ -1,39 +1,12 @@
 import * as child_process from 'child_process';
-import * as fs from 'fs';
 import * as gulp from 'gulp';
-import * as path from 'path';
 
 // This import lacks type definitions.
 const gulpClean = require('gulp-clean');
 
 // There are no type definitions available for these imports.
 const resolveBin = require('resolve-bin');
 
-
-/** If the string passed in is a glob, returns it, otherwise append '**\/*' to it. */
-function _globify(maybeGlob: string, suffix = '**/*') {
-  if (maybeGlob.indexOf('*') > -1) {
-    return maybeGlob;
-  }
-  try {
-    if (fs.statSync(maybeGlob).isFile()) {
-      return maybeGlob;
-    }
-  } catch {}
-  return path.join(maybeGlob, suffix);
-}
-
-
-/** Creates a task that runs the TypeScript compiler */
-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]);
-}
-
 /** Options that can be passed to execTask or execNodeTask. */
 export interface ExecTaskOptions {
   // Whether STDOUT and STDERR messages should be printed.
@@ -101,17 +74,6 @@ export function execNodeTask(packageName: string, executable: string | string[],
   };
 }
 
-
-/** Copy files from a glob to a destination. */
-export function copyTask(srcGlobOrDir: string | string[], outRoot: string) {
-  if (typeof srcGlobOrDir === 'string') {
-    return () => gulp.src(_globify(srcGlobOrDir)).pipe(gulp.dest(outRoot));
-  } else {
-    return () => gulp.src(srcGlobOrDir.map(name => _globify(name))).pipe(gulp.dest(outRoot));
-  }
-}
-
-
 /** Delete files. */
 export function cleanTask(glob: string) {
   return () => gulp.src(glob, { read: false }).pipe(gulpClean(null));