build: bazel typescript targets should use tsickle for decorator processing (#16906)

We want to enable tsickle for decorator processing. This was one of the
blockers for using the bazel packages in releases as unprocessed decorators
will end up referencing DOM specific globals (e.g. `HTMLElement`).

These references would then break server-side rendering for non CLI
projects. Read more about this angular/angular#30586

Author: devversion

WORKSPACE

@@ -35,9 +35,11 @@ node_repositories(
 
 yarn_install(
     name = "npm",
-    # Ensure that the script is available when running `postinstall` in the Bazel sandbox.
+    # Ensure that all resources are available when the "postinstall" or "preinstall" scripts
+    # are executed in the Bazel sandbox.
     data = [
         "//:angular-tsconfig.json",
+        "//:tools/bazel/postinstall-patches.js",
         "//:tools/npm/check-npm.js",
     ],
     package_json = "//:package.json",

package.json

@@ -13,7 +13,7 @@
     "yarn": ">= 1.17.3"
   },
   "scripts": {
-    "postinstall": "ngc -p angular-tsconfig.json",
+    "postinstall": "node --preserve-symlinks --preserve-symlinks-main tools/bazel/postinstall-patches.js",
     "build": "gulp build-release-packages",
     "bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable,unsorted-dict-items,out-of-order-load",
     "bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
@@ -141,6 +141,7 @@
     "run-sequence": "^1.2.2",
     "scss-bundle": "^2.0.1-beta.7",
     "selenium-webdriver": "^3.6.0",
+    "shelljs": "^0.8.3",
     "sorcery": "^0.10.0",
     "stylelint": "^10.1.0",
     "ts-api-guardian": "^0.4.6",

src/bazel-tsconfig-build.json

@@ -33,6 +33,11 @@
     // some options here just in favor of the standard tsconfig's which extending this one.
     "suppressTsconfigOverrideWarnings": true,
 
+    // Enable tsickle so that decorators are processed by tsickle. This is necessary because
+    // we don't want to ship JavaScript files that contain references to DOM elements. This
+    // breaks server-side rendering for non-CLI projects: see: angular#30586.
+    "tsickle": true,
+
     // See https://github.com/angular/angular/issues/29107
     "devmodeTargetOverride": "es5"
   }

src/bazel-tsconfig-test.json

@@ -10,6 +10,10 @@
   "bazelOptions": {
     "suppressTsconfigOverrideWarnings": true,
 
+    // Disable tsickle. Tsickle is only needed for building library code that will be
+    // shipped through npm packages. This should speed up compilation for tests.
+    "tsickle": false,
+
     // See https://github.com/angular/angular/issues/29107
     "devmodeTargetOverride": "es5"
   }

tools/bazel/BUILD.bazel

@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "nodejs_binary")
+
+# Custom "tsc_wrapped" binary that has "tsickle" available as runtime dependency.
+# This is needed as the default compiler for a "ts_library" does not have a dependency
+# on "tsickle" by default.
+nodejs_binary(
+    name = "tsc_wrapped_with_tsickle",
+    data = [
+        "@npm//@bazel/typescript",
+        "@npm//tsickle",
+    ],
+    entry_point = "@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js",
+    install_source_map_support = False,
+)

tools/bazel/postinstall-patches.js

@@ -0,0 +1,31 @@
+/**
+ * Script that runs after node modules have been installed (including Bazel managed
+ * node modules). This script can be used to apply postinstall patches. Similarly
+ * to Bazel's "patches" attribute on repository fetch rules.
+ */
+
+const shelljs = require('shelljs');
+const path = require('path');
+
+shelljs.set('-e');
+shelljs.cd(path.join(__dirname, '../..'));
+
+// Workaround for https://github.com/angular/angular/issues/18810.
+shelljs.exec('ngc -p angular-tsconfig.json');
+
+// Workaround for https://github.com/angular/angular/issues/30586. It's not possible to
+// enable tsickle decorator processing without enabling import rewriting to closure.
+// This replacement allows us to enable decorator processing without rewriting imports.
+shelljs.sed(
+    '-i', /(this\.transformTypesToClosure) = bazelOpts\.tsickle;/, '$1 = false;',
+    'node_modules/@bazel/typescript/internal/tsc_wrapped/compiler_host.js');
+shelljs.sed(
+    '-i', 'bazelOpts\.tsickleExternsPath', 'null',
+    'node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js');
+
+// Workaround for https://github.com/angular/angular/issues/32389. We need to ensure
+// that tsickle is available for esm5 output re-compilations.
+shelljs.sed(
+    '-i', '@npm//@bazel/typescript/bin:tsc_wrapped',
+    '@angular_material//tools/bazel:tsc_wrapped_with_tsickle',
+    'node_modules/@angular/bazel/src/esm5.bzl');

tools/defaults.bzl

@@ -34,6 +34,10 @@ def ts_library(tsconfig = None, deps = [], testonly = False, **kwargs):
     _ts_library(
         tsconfig = tsconfig,
         testonly = testonly,
+        # The default "ts_library" compiler does not come with "tsickle" available. Since
+        # we have targets that use "tsickle" decorator processing, we need to ensure that
+        # the compiler could load "tsickle" if needed.
+        compiler = "//tools/bazel:tsc_wrapped_with_tsickle",
         deps = local_deps,
         **kwargs
     )

yarn.lock

@@ -10280,6 +10280,15 @@ shelljs@^0.7.0:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+shelljs@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
+  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 sigmund@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"