build: bazel typescript targets should use tsickle for decorator processing

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,22 @@
+/**
+ * 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');

tools/defaults.bzl

@@ -27,15 +27,21 @@ def _getDefaultTsConfig(testonly):
 def ts_library(tsconfig = None, deps = [], testonly = False, **kwargs):
     # Add tslib because we use import helpers for all public packages.
     local_deps = ["@npm//tslib"] + deps
+    all_args = dict(**kwargs)
 
     if not tsconfig:
         tsconfig = _getDefaultTsConfig(testonly)
 
+        # If the default build tsconfig with "tsickle" enabled is used, wire up
+        # a different "compiler" binary where "tsickle" is available as runfile.
+        if not testonly:
+            all_args["compiler"] = "//tools/bazel:tsc_wrapped_with_tsickle"
+
     _ts_library(
         tsconfig = tsconfig,
         testonly = testonly,
         deps = local_deps,
-        **kwargs
+        **all_args
     )
 
 def ng_module(deps = [], tsconfig = None, testonly = False, **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"