feat(examples): show how to use ts_library(use_angular_plugin) with worker mode (#1839)

Author: alexeagle

.bazelrc

@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
 # This lets us glob() up all the files inside the examples to make them inputs to tests
 # To update these lines, just run `yarn bazel:update-deleted-packages`
 # (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
-build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
-query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_bazel_architect/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_bazel_architect/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
 
 # Mock versioning command to test the --stamp behavior
 build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"

examples/angular/src/BUILD.bazel

@@ -8,6 +8,7 @@ load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
 load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
 load("@npm_bazel_terser//:index.bzl", "terser_minified")
 load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -43,18 +44,15 @@ ts_library(
     ],
 )
 
-ts_library(
+ng_ts_library(
     name = "src",
     srcs = [
         "main.dev.ts",
         "main.prod.ts",
     ],
     tsconfig = ":tsconfig.json",
-    use_angular_plugin = True,
     deps = [
         "//src/app",
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@angular/router",

examples/angular/src/app/BUILD.bazel

@@ -1,40 +1,34 @@
-load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ts_library(
+ng_ts_library(
     name = "app",
     srcs = glob(
         include = ["*.ts"],
         exclude = ["app.server.module.ts"],
     ),
     angular_assets = ["app.component.html"],
     tsconfig = "//src:tsconfig.json",
-    use_angular_plugin = True,
     deps = [
         "//src/app/hello-world",
         "//src/app/home",
         "//src/app/todos",
         "//src/app/todos/reducers",
         "//src/shared/material",
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@angular/router",
         "@npm//@ngrx/store",
     ],
 )
 
-ts_library(
+ng_ts_library(
     name = "app_server",
     srcs = ["app.server.module.ts"],
     tsconfig = "//src:tsconfig-server",
-    use_angular_plugin = True,
     deps = [
         ":app",
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/platform-server",
     ],

examples/angular/src/app/hello-world/BUILD.bazel

@@ -1,6 +1,7 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
 load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -9,7 +10,7 @@ sass_binary(
     src = "hello-world.component.scss",
 )
 
-ts_library(
+ng_ts_library(
     name = "hello-world",
     srcs = [
         "hello-world.component.ts",
@@ -20,12 +21,9 @@ ts_library(
         ":hello-world-styles",
     ],
     tsconfig = "//src:tsconfig.json",
-    use_angular_plugin = True,
     deps = [
         "//src/lib/shorten",
         "//src/shared/material",
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/router",

examples/angular/src/app/home/BUILD.bazel

@@ -1,16 +1,13 @@
-load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ts_library(
+ng_ts_library(
     name = "home",
     srcs = ["home.ts"],
     angular_assets = ["home.html"],
     tsconfig = "//src:tsconfig.json",
-    use_angular_plugin = True,
     deps = [
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/router",
     ],

examples/angular/src/app/todos/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "todos.component.scss",
 )
 
-ts_library(
+ng_ts_library(
     name = "todos",
     srcs = [
         "todos.component.ts",
@@ -19,12 +19,9 @@ ts_library(
         ":todos-styles",
     ],
     tsconfig = "//src:tsconfig.json",
-    use_angular_plugin = True,
     deps = [
         "//src/app/todos/reducers",
         "//src/shared/material",
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",

examples/angular/src/shared/material/BUILD.bazel

@@ -1,15 +1,12 @@
-load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("//tools:angular_ts_library.bzl", "ng_ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ts_library(
+ng_ts_library(
     name = "material",
     srcs = glob(["*.ts"]),
     tsconfig = "//src:tsconfig.json",
-    use_angular_plugin = True,
     deps = [
-        # Needed for the angular compiler plugin
-        "@npm//@angular/compiler-cli",
         "@npm//@angular/core",
         "@npm//@angular/material",
     ],

examples/angular/tools/BUILD.bazel

@@ -0,0 +1,15 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+
+# Custom ts_library compiler that runs tsc_wrapped with angular/compiler-cli statically linked
+# This can be used with worker mode because we don't need the linker at runtime to make
+# the angular plugin loadable
+# Just a clone of @npm//@bazel/typescript/bin:tsc_wrapped with added deps
+nodejs_binary(
+    name = "tsc_wrapped_with_angular",
+    data = [
+        "@npm//@angular/compiler-cli",
+        "@npm//@bazel/typescript",
+    ],
+    entry_point = "@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js",
+    visibility = ["//:__subpackages__"],
+)

examples/angular/tools/angular_ts_library.bzl

@@ -0,0 +1,11 @@
+"Shows how to enable both worker mode and use_angular_plugin to make a drop-in replacement for ng_module"
+
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+def ng_ts_library(**kwargs):
+    ts_library(
+        compiler = "//tools:tsc_wrapped_with_angular",
+        supports_workers = True,
+        use_angular_plugin = True,
+        **kwargs
+    )

packages/typescript/src/internal/build_defs.bzl

@@ -144,8 +144,7 @@ def _compile_action(ctx, inputs, outputs, tsconfig_file, node_opts, description
     # because it causes bazel to spawn a new worker for every action
     # See https://github.com/bazelbuild/rules_nodejs/issues/1803
     # TODO: understand the interaction between linker and workers better
-    # When using plugins, we need the linker, so we disable workers for that case as well
-    if ctx.attr.supports_workers and not ctx.attr.use_angular_plugin:
+    if ctx.attr.supports_workers:
         # One at-sign makes this a params-file, enabling the worker strategy.
         # Two at-signs escapes the argument so it's passed through to tsc_wrapped
         # rather than the contents getting expanded.
@@ -523,4 +522,13 @@ def ts_library_macro(tsconfig = None, **kwargs):
     if not tsconfig:
         tsconfig = "//:tsconfig.json"
 
-    ts_library(tsconfig = tsconfig, **kwargs)
+    # plugins generally require the linker
+    # (unless the user statically linked them into the compiler binary)
+    # Therefore we disable workers for them by default
+    if "supports_workers" in kwargs.keys():
+        supports_workers = kwargs.pop("supports_workers")
+    else:
+        uses_plugin = kwargs.get("use_angular_plugin", False)
+        supports_workers = not uses_plugin
+
+    ts_library(tsconfig = tsconfig, supports_workers = supports_workers, **kwargs)