build: bazel typescript targets should use tsickle for decorator processing

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"